Webpack 3.X - 4.X 升级记录
先升级 webpack-cli
首先：执行命令
代码语言：javascript复制npm install webpack-cli -D
或者
npm install -g yarn
yarn add webpack-cli -D启动服务出现的问题
问题1：compilation.mainTemplate.applyPluginsWaterfall is not a function
暂时解决方案：
代码语言：javascript复制yarn add webpack-contrib/html-webpack-plugin -D相关讨论解决方案，在这里
问题2：Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
解决方案： 去除，require(‘extract-text-webpack-plugin’)的引用
问题3：webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
目前，4.0中已经删除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（查看源码没有发现默认值）
}
}
}
},==最后，optimization 使用相关内容在这里==
CommonsChunkPlugin
https://news.aotu.io/a/5a7b53d3d50eee0042c20c0c?utm_medium=lite02_web&utm_source=aotu_io
问题4：警告
警告提示，表示 在启动服务的时候没有指定mode
在 package.json 中加上--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()
]
};参考资料：
1、webpack 4.0更新内容
