package.json
Change webpack related devDependencies versions:
webpack
to ^4
webpack-dev-server
to ^3
- Add
webpack-cli
- Replace
extract-text-webpack-plugin
with mini-css-extract-plugin
- Replace
uglifyjs-webpack-plugin
with terser-webpack-plugin
{
"devDependencies": {
"mini-css-extract-plugin": "^1",
"terser-webpack-plugin": "^4",
"webpack": "^4",
"webpack-cli": "^3",
"webpack-dev-server": "^3"
}
}
webpack.base.conf.js
Add mode
option.
module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
context: path.resolve(__dirname, '../'),
}
webpack.prod.conf.js
- Add
performance
and optimization
option
- Replace
ExtractTextPlugin
with MiniCssExtractPlugin
- Remove
UglifyJsPlugin
and all webpack.optimize.CommonsChunkPlugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserPlugin = require('terser-webpack-plugin');
const webpackConfig = merge(baseWebpackConfig, {
performance: {
hints: false
},
optimization: {
runtimeChunk: {
name: 'manifest'
},
minimizer: [
new TerserPlugin(),
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
],
splitChunks: {
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: false,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'initial',
priority: -10
}
}
}
},
plugins: [
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].css'),
chunkFilename: utils.assetsPath('css/[name].[contenthash].css')
}),
],
})
That’s it, enjoy. 🎉