Webpack 3.X - 4.X 升级记录

webpack-cli

npm install webpack-cli -D
或者
npm install -g yarn
yarn add webpack-cli -D

启动服务出现的问题

compilation.mainTemplate.applyPluginsWaterfall is not a function

yarn add webpack-contrib/html-webpack-plugin -D

Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

CommonsChunkPlugin

splitChunks

new webpack.optimize.CommonsChunkPlugin

optimization: {
runtimeChunk: {
name: "manifest"
},
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
}

optimization

optimization: {
splitChunks: {
chunks: "initial",         // 必须三选一： "initial" | "all"(默认就是all) | "async"
minSize: 0,                // 最小尺寸，默认0
minChunks: 1,              // 最小 chunk ，默认1
maxAsyncRequests: 1,       // 最大异步请求数， 默认1
maxInitialRequests: 1,    // 最大初始化请求书，默认1
name: () => {},              // 名称，此选项课接收 function
cacheGroups: {                 // 这里开始设置缓存的 chunks
priority: "0",                // 缓存组优先级 false | object |
vendor: {                   // key 为entry中定义的 入口名称
chunks: "initial",        // 必须三选一： "initial" | "all" | "async"(默认就是异步)
test: /react|lodash/,     // 正则规则验证，如果符合就提取 chunk
name: "vendor",           // 要缓存的 分隔出来的 chunk 名称
minSize: 0,
minChunks: 1,
enforce: true,
maxAsyncRequests: 1,       // 最大异步请求数， 默认1
maxInitialRequests: 1,    // 最大初始化请求书，默认1
reuseExistingChunk: true   // 可设置是否重用该chunk（查看源码没有发现默认值）
}
}
}
},

mode

--mode development

--mode production

"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
}

webpack.config.js

var webpack = require('webpack'),
path = require('path'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
//ExtractTextPlugin = require('extract-text-webpack-plugin'), 4.0弃用
ip = require('ip'),
CleanPlugin = require('clean-webpack-plugin'),
c = require('./config/packConfig'),
HashedModuleIdsPlugin = require('./config/HashedModuleIdsPlugin'),
BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
Visualizer = require('webpack-visualizer-plugin'),
HappyPack = require('happypack'),
CopyWebpackPlugin = require('copy-webpack-plugin'),
CompressionPlugin = require('compression-webpack-plugin');

const resolve = dir => {
return path.join(__dirname, c.cf.entry.module, dir)
}

module.exports = {
entry: {
app: resolve("/components/app.js"),
vendor: c.cf.entry.vendor,
},
output: {
path: resolve(c.cf.output.path),
publicPath: '',
filename: "assets/js/[name]" + env + ".js",
chunkFilename: "chunk/[name]" + env + ".js",
library: 'library',
libraryTarget: 'umd',
umdNamedDefine: true
},
devServer: {
inline: true,
open: true,
port: c.cf.server.port,
compress: true,
host: ip.address(),
progress: true,
historyApiFallback: true,
contentBase: "./",
https: false,
proxy: c.prox
},
//4.0配置
optimization: {
/*splitChunks: {
chunks: 'all',//"initial" | "async" | "all"
cacheGroups: {
default: false,
vendors: false,
},
},*/
/*splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}*/
runtimeChunk: {
name: "manifest"
},
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all"
}
}
}
},

resolveLoader: {
moduleExtensions: ['-loader']
},

module: {
//4.0之前是 loaders,现在修改为 rules
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
}, {
test: /\.vue$/,
exclude: /node_modules/,
loader: 'vue',
}, {
test: /\.(css|less)$/,
exclude: /node_modules/,
loader: "style!css!less"
}, {
test: /\.(html|tpl)$/,
exclude: /node_modules/,
loader: 'html'
}, {
test: /\.jsx$/,
exclude: /node_modules/,
loaders: ['jsx', 'babel']
}],
noParse: /jquery|lodash/,

unknownContextRegExp: /$^/,
unknownContextCritical: false,

exprContextRegExp: /$^/,
exprContextCritical: false,

wrappedContextRegExp: /$^/,
wrappedContextCritical: false,

},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: resolve('/components/index.html')
}),
new HashedModuleIdsPlugin(),
/* //4.0 删除 CommonsChunkPlugin模块，改为splitChunks
* new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor'],
}),
/* //4.0报错   Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
new ExtractTextPlugin({
filename: 'assets/css/[name].css',
allChunks: true
}),*/
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(js|css)$'),
threshold: 50240,
minRatio: 0.8
}),
//new webpack.NoErrorsPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new CleanPlugin(["*"], {
"root": resolve(c.cf.output.path),
verbose: true,
dry: false
}),
new webpack.HotModuleReplacementPlugin()
]
};