webpack升级与优化之路

webpack升级与优化之路

最近将项目中的webpack3升到了webpack5，并且对打包配置进行了调整优化，分模块独立版本号打包多页面项目，降低了项目上线的风险。在这个过程中既遇到了一些问题，也学到了一些东西。

升级webpack5遇到的坑

将项目的weback从3升到5，遇到了一系列的问题，这里分享两个问题的解决方案。

1.extract-text-webpack-plugin兼容问题

2.webpack-dev-server兼容问题

1.extract-text-webpack-plugin

升到webpack5后，运行打包直接报错，如下：

这是因为webpack4以上的版本不再使用“extract-text-webpack-plugin”，应该改成用“mini-css-extract-plugin”

将原代码：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  plugins: [
     new ExtractTextPlugin({ filename:'[name].css', disable: false, allChunks: true })
  ],
  module: {
    loaders: [      
        {