不同的环境应该编写不同的配置文件,为了不必在不同的配置文件里写重复的配置,我们提取相同的部分作为通用的配置文件,首先安装以下插件
npm install --save-dev webpack-merge
然后创建文件webpack.common.js,webpack.dev.js和webpack.prod.js分别表示通用配置文件,开发环境配置文件和生产环境配置文件。
webpack.common.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './web'
}
});
webpack.prod.js
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
plugins: [
new UglifyJSPlugin()
]
});
然后修改我们的package.json文件的script
原来:
"scripts": {
"test": "test",
"watch": "webpack --watch",
"dev": "webpack",
"start": "webpack-dev-server --open",
"server": "node server.js"
},
修改后:
"scripts": {
"test": "test",
"watch": "webpack --watch",
"build": "webpack --config webpack.prod.js",
"start": "webpack-dev-server --open --config webpack.dev.js",
"server": "node server.js"
},
指定生产环境和开发环境的配置文件
注意:打包的时候,可能es6的语法不被识别,会报类似以下的错误
这是要配置babel-loader,我这里用的是版本如下(注意兼容性)
然后,在通用配置文件里的module的rule字段配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
就可以打包成功了
UglifyJSPlugin,BabelMinifyWebpackPlugin,ClosureCompilerPlugin都可以用于压缩代码
我们在生产环境中使用 source-map
选项,在开发环境中用到 inline-source-map
ps: 避免在生产中使用 inline-***
和 eval-***
,因为它们可以增加 bundle 大小,并降低整体性能