webpack 1 x構建react專案簡單配置

2021-09-30 14:23:32 字數 2409 閱讀 7026

var path = require('path');

var webpack = require('webpack');

// var openbrowserplugin = require('open-browser-webpack-plugin');

var htmlwebpackplugin = require('html-webpack-plugin');

var extracttextplugin = require("extract-text-webpack-plugin"); //css單獨打包

//定義了一些資料夾的路徑

var root_path = path.resolve(__dirname);

var build_path = path.resolve(root_path, 'build');

//template的資料夾路徑

module.exports = ,

//輸出的檔名 合併以後的js會命名為bundle.js

output: ,

externals: ,

devtool: 'cheap-module-eval-source-map',

devserver: }},

resolve: ,

module: ,

,] ],// `style: true` 會載入 less 檔案

presets: ['es2015', 'react']}},

]},

plugins: [

new extracttextplugin('[name].css'),

//建立了兩個htmlwebpackplugin的例項,生成兩個頁面

new htmlwebpackplugin(),

//自動開啟該頁面

// new openbrowserplugin(),

new webpack.hotmodulereplacementplugin()

]};

這是生產配置

var path = require('path');

var webpack = require('webpack');

// var openbrowserplugin = require('open-browser-webpack-plugin');

var htmlwebpackplugin = require('html-webpack-plugin');

var extracttextplugin = require("extract-text-webpack-plugin"); //css單獨打包

var optimizecssassetsplugin = require('optimize-css-assets-webpack-plugin'); // 壓縮css的外掛程式

//定義了一些資料夾的路徑

var root_path = path.resolve(__dirname);

var build_path = path.resolve(root_path, 'dist');

//template的資料夾路徑

var config = module.exports = ,

//輸出的檔名 合併以後的js會命名為bundle.js

output: ,

externals: ,

devtool: 'source-map',

resolve: ,

module: ,,]]

}},]},

plugins: [

//以下配置可以告訴 react 當前是生產環境,請最小化壓縮 js ,即把開發環境中的一些提示、警告、判斷通通去掉,直流以下發布之後可用的**。

new webpack.defineplugin(

}),//把入口檔案裡面的陣列打包成verdors.js

// new webpack.optimize.commonschunkplugin('vendors','commons/vendors.js'),

// new webpack.optimize.commonschunkplugin(

// ),

new extracttextplugin('[name].[chunkhash:6].css'),

//建立了兩個htmlwebpackplugin的例項,生成兩個頁面

new htmlwebpackplugin(),

//壓縮css

new optimizecssassetsplugin( },

canprint: true

}),//這個使用uglifyjs壓縮你的js**

new webpack.optimize.uglifyjsplugin(,

compress:

})]};

webpack1 x至webpack3 x遷移踩坑

今天將我自己的手腳架從webpack1.x遷移到webpack3.x,途中一切順利,跟著遷移文件 1 其中比較坑爹的2點是 1 postcss配置。需要在根目錄建立postcss.config.js這樣乙個配置檔案 嗯,解耦了。配置項變了啊。挺坑的。路過的朋友注意一下。2 css使用hot modu...

webpack構建react應用

一 新建乙個資料夾。mkdir webpack react demo二 在此資料夾下建立package.json檔案 右鍵新建檔案也行。這裡使用 npm init 初始化專案的方式自動生成。在webpack react demo資料夾下進入cmd命令列,輸入npm init,一路enter就行。三 ...

webpack 在構建react時候的peizhi

1.安裝webpack 全域性安裝 sudo npm install g webpack 本專案安裝 npm i webpack d 目錄結構 2.webpack配置 每個專案下都必須配置有乙個 webpack.config.js 它的作用如同常規的 gulpfile.js gruntfile.js...