前言
開發環境(development)和生產環境(production)的構建目標差異很大
在開發環境中,我們需要具有強大的、具有實時重新加載(live reloading)或熱模塊替換(hot module replacement)能力的 source map 和 localhost server。
在生產環境中,我們的目標則轉向於關注更小的 bundle,更輕量的 source map,以及更優化的資源,以改善加載時間。
由於要遵循邏輯分離,我們通常建議為每個環境編寫彼此獨立的 webpack 配置。生成環境和開發環境有差異,但我們需要遵循不重復原則,保留一個“通用”配置。為了將這些配置合並在一起,我們將使用一個名為 webpack-merge
的工具。通過“通用”配置,我們不必在環境特定的配置中重復代碼
配置環境
1. 先安裝一個工具和兩個插件
npm install --save-dev webpack-merge //配置時避免重復代碼
npm install --save-dev uglifyjs-webpack-plugin //縮小js文件
npm install --save-dev clean-webpack-plugin //自動刪除webpack里的dist目錄
安裝完成后在package.json
可以看到
2. 刪除webpack.config.js
文件,再新建以下三個配置文件
webpack.common.js 通用配置
const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');//注意引入寫法
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
main:'./src/main.js'
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({title:'output management'})
],
output:{
filename:'[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
};
webpack.dev.js 開發環境
const {merge} = require('webpack-merge'); //1.加載工具
const common = require('./webpack.common.js'); //2.獲取通用配置
module.exports = merge(common, { //3.合並配置
devtool: 'inline-source-map',//報錯提醒
devServer: { //自動編譯
contentBase: './dist'
}
})
webpack.prod.js 生成環境
const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = merge(common, {
devtool:'source-map',//使用source-map
plugins:[
new UglifyJSPlugin({sourceMap:true})//打開source-map
],
})
建議在生產環境中啟用 source map,因為它們對調試源碼(debug)和運行基准測試(benchmark tests)很有幫助。打包后會生成一個map文件
修改npm腳本
現在,我們把 scripts
重新指向到新配置。將 npm start
定義為開發環境腳本,並在其中使用 webpack-dev-server
;將 npm run build
定義為生產環境腳本:
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.prod.js",//修改
"start": "webpack-dev-server --open --config webpack.dev.js"//修改
},
指定環境
通常我們需要為生產環境和本地環境添加不同的環境變量,在Webpack中可以使用DefinePlugin
進行設置。
許多框架與庫都采用process.env.NODE_ENV
作為一個區別開發環境和生產環境的變量。process.env是Node.js用於存放當前進程環境變量的對象;而NODE_ENV則可以讓開發者指定當前的運行時環境,當它的值為production時即代表當前為生產環境,庫和框架在打包時如果發現了它就可以去掉一些開發環境的代碼,如警告信息和日志等。這將有助於提升代碼運行速度和減小資源體積
webpack.prod.js
const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');//1. 加載
module.exports = merge(common, {
devtool:'source-map',
plugins:[
new UglifyJSPlugin({sourceMap:true}),
new webpack.DefinePlugin({//2.使用
'process.env.NODE_ENV': JSON.stringify('production')
})
],
})