记一次webpack3升级到webpack4的配置修改

最近在研究webpack5的新特性module federation（共享组件模块 --感兴趣的可以前往mf-webpack4 - npm），但是基于公司项目都是webpack4以及以下的版本，就想着有没有兼容w4的版本，后面了解到mf-webpack4，但是我们有一个项目是webpack3的版本，于是开始了坎坷的升级之路，下面记录一下问题.....

1、先升级以下依赖包至以下版本：

"eslint-loader": "^1.7.1",

"mini-css-extract-plugin": "^1.3.0",

"webpack-cli": "^3.2.1",

"html-webpack-plugin": "^4.5.2",

"vue-loader": "^15.10.1",

"webpack": "^4.40.3",

"webpack-dev-server": "^3.1.14",

2、修改 webpack.dev.config.js

2.1 手动添加vue-loader

const VueLoaderPlugin = require('vue-loader/lib/plugin')

plugins: [
    new VueLoaderPlugin(),
    .....
]

2.2 新增mode

merge里面新增 mode: 'development'

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  ........,
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  ......
})

2.3 删除或注释掉plugins里面的NamedModulesPlugin、NoEmitOnErrorsPlugin

.......

3、修改webpack.prod.config.js

3.1 和dev一样增加vue-loader和mode

3.2 增加MiniCssExtractPlugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin(
        { filename: utils.assetsPath('css/[name].[contenthash].css')}
    ),
    .....
    new webpack.DefinePlugin({
      'process.env': env
    }),
]

3.3 增加optimization

output： {........},

optimization: { 
    runtimeChunk: { name: 'manifest' }, 
    minimizer: [new UglifyJsPlugin({ cache: true, parallel: true, sourceMap:config.build.productionSourceMap, uglifyOptions: { warnings: false } }), 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: { vendor: { name: 'vendor', chunks: 'initial', priority: -10, reuseExistingChunk: false, test: /node_modules\/(.*)\.js/ }, styles: { name: 'styles', test: /\.(scss|css)$/, chunks: 'all', minChunks: 1, reuseExistingChunk: true, enforce: true } } } },

plugins: [..........]

3.4 注释掉之前的UglifyJsPlugin、ExtractTextPlugin、OptimizeCSSPlugin

【配置现已放入optimization，之前的没用啦】

3.5 HtmlWebpackPlugin中的chunksSortMode设为 'auto'

解决错误：UnhandledPromiseRejectionWarning: Error: “dependency“ is not a valid chunk sort m

3.6 注释所有的CommonsChunkPlugin

4、修改webpack.test.config.js

修改内容和prod一致，注意改一下mode值

5、修改build/utils.js

添加 const MiniCssExtractPlugin = require('mini-css-extract-plugin')

找到return ExtractTextPlugin.extract({........}) 替换成 

return [MiniCssExtractPlugin.loader].concat(loaders)

遇到的其他报错

HtmlWebpackPlugin throw new Error('Cyclic dependency' + nodeRep)

查看html-webpack-plugin版本

//官方配置：

Webpack 5

  npm i --save-dev html-webpack-plugin

  yarn add --dev html-webpack-plugin


Webpack 4

  npm i --save-dev html-webpack-plugin@4

  yarn add --dev html-webpack-plugin@4

compilation.getAssets is not a function

查看webpack版本 至少4.40.0

降级 min-css-extract-plugin 到 1.3.0