webpack2升级至webpack4
1. 先将node_modules下的chromedriver文件夹移出
2. 升级jsencrypt
npm view jsencrypt versions 查看所有版本：
[ '2.1.0', '2.2.0', '2.3.0', '2.3.1', '3.0.0-beta.1', '3.0.0-rc.1' ]
发现并无依赖中的3.0.0版本，所以升级至最新版本:
npm i jsencrypt@3.0.0-rc.1
3. 升级webpack4最新版
npm install webpack@latest
4. 升级所需依赖至最新版
npm i less-loader@latest file-loader@latest url-loader@latest css-loader@latest vue-loader@latest
npm i vue-style-loader@latest
npm i optimize-css-assets-webpack-plugin@latest
npm i mini-css-extract-plugin@latest uglifyjs-webpack-plugin@latest
npm i eslint-plugin-html@latest copy-webpack-plugin@latest -D
npm i html-webpack-plugin@latest
5. 修改webpack配置
在build/utils.js中注释如下：
// var ExtractTextPlugin = require('extract-text-webpack-plugin')
/* return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
}) */
//上面注释下增加下列代码
return [MiniCssExtractPlugin.loader].concat(loaders)
并增加新引入：
var MiniCssExtractPlugin = require('mini-css-extract-plugin')
在webpack.prod.conf.js和webpack.dev.conf.js中webpack配置中分别增加下配置：
//webpack.prod.conf.js
mode: 'production',
//webpack.dev.conf.js
mode: 'development',
注释掉webpack.prod.conf.js如下配置
// var ExtractTextPlugin = require('extract-text-webpack-plugin')
webpack.prod.conf.js和webpack.dev.conf.js增加如下引入：
var VueLoaderPlugin = require('vue-loader/lib/plugin')
var MiniCssExtractPlugin = require('mini-css-extract-plugin')// webpack.dev.conf.js不需要
var UglifyJsPlugin = require('uglifyjs-webpack-plugin')
注释掉webpack.prod.conf.js和webpack.dev.conf.js（含有以下插件使用都注释掉）中plugins下配置：
// new webpack.optimize.UglifyJsPlugin({
// comments:false,//去除注释
// compress: {
// warnings: false,
// drop_debugger: true,
// drop_console: true
// },
// exclude: /(zh-CN|en)\.[\.a-z0-9]*\.js$/,
// sourceMap: false
// }),
// new ExtractTextPlugin({
// filename: utils.assetsPath('css/[name].[contenthash].css')
// }),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'vendor',
// minChunks: function (module, count) {
// // any required modules inside node_modules are extracted to vendor
// return (
// module.resource &&
// /\.js$/.test(module.resource) &&
// module.resource.indexOf(
// path.join(__dirname, '../node_modules')
// ) === 0
// )
// }
// }),
// new OptimizeCSSPlugin({
// cssProcessorOptions: {
// safe: true
// }
// }),
// new webpack.optimize.CommonsChunkPlugin({
// name: 'manifest',
// chunks: ['vendor']
// }),
在webpack.prod.conf.js和webpack.dev.conf.js中plugins下配置：
new VueLoaderPlugin(),
// webpack.dev.conf.js不需要
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
在webpack.prod.conf.js和webpack.dev.conf.js中plugins后增加：
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: config.build.productionSourceMap
}),
new OptimizeCSSPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
// cssProcessorOptions: cssnanoOptions,
cssProcessorPluginOptions: {
preset: ['default', {
discardComments: {
removeAll: true,
},
normalizeUnicode: false
}]
},
canPrint: true
})
],
splitChunks: {
chunks: 'all',
minSize: 30000,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: true, // 代码块的名字，设置为true则表示根据模块和缓存组秘钥自动生成, 实现固化 chunkId，保持缓存的能力
minChunks: 1,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
priority: 10
},
manifest: {
test: /[\\/]src[\\/]/,
minSize: 0,
minChunks: 2,
priority: 9
}
}
}
}
在build/dev-server.js修改如下：
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true,
states: {
colors: true,
chunks: false
}
})
在webpack.prod.conf.js的HtmlWebpackPlugin插件中配置修改：
- 在管理端html模板
excludeChunks: [
'appClient',
'manifest~iview-black-client~iviewSkin0',
'iview-black-client'
],
- 在客户端html模板
excludeChunks: [
'app',
'manifest~app~appSkin0~appSkin1',
'iview-white'
],
6. 遇到的问题
- warning：Tapable.plugin is deprecated. Use new API on .hooks instead(此警告信息指出某个loader或plugin使用了废弃的api，但不影响打包编译。),增加process.traceDeprecation = true;查看到详细插件报错：
building for production...(node:13484) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
at OptimizeCssAssetsPlugin.apply (d:\study\webpackUpdate\webDevelop\node_modules\optimize-css-assets-webpack-plugin\index.js:42:12)
at WebpackOptionsApply.process (d:\study\webpackUpdate\webDevelop\node_modules\webpack\lib\WebpackOptionsApply.js:481:16)
at webpack (d:\study\webpackUpdate\webDevelop\node_modules\webpack\lib\webpack.js:57:48)
at err (d:\study\webpackUpdate\webDevelop\build\build.js:19:3)
at next (d:\study\webpackUpdate\webDevelop\node_modules\rimraf\rimraf.js:75:7)
at CB (d:\study\webpackUpdate\webDevelop\node_modules\rimraf\rimraf.js:111:9)
at FSReqWrap.args [as oncomplete] (fs.js:140:20)
可以看出是 optimize-css-assets-webpack-plugin插件出错了，所以进行升级
npm i optimize-css-assets-webpack-plugin@latest
总结
在整个升级过程中，主要更新一些loader和webpack配置的修改，在升级后打包时间提升，整个包的体积能缩小20%。后续配置还待优化。
