webpack4升级webpack5注意事项

1. webpack.IgnorePlugin 用法

new webpack.IgnorePlugin({ resourceRegExp, contextRegExp });

2. webpack-merge导出有变
3. webpack-manifest-plugin导出有变
4. copy-webpack-plugin 参数有变

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "source", to: "dest" },
        { from: "other", to: "public" },
      ],
    }),
  ],
};

5. devtool取值更加严格
6. node取值
7. output.jsonpFunction字段变化为：chunkLoadingGlobal
8. webpack4 eslint-loader 废弃，用EslintWebpackPlugin替代
9. webpack.DefinePlugin有变
10. WebpackDevServer参数顺序变化
11. devServer配置文件删除了watchOptions,quiet等
12. HashedModuleIdsPlugin不直接导出，使用webpack.ids.HashedModuleIdsPlugin
13. 临时在webpack config文件添加process.traceDeprecation = true;查看具体堆栈报错信息
14. warning[DEP_WEBPACK_MAIN_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: MainTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead) 需要 mini-css-extract-plugin 升级
15. [DEP_WEBPACK_COMPILATION_OPTIMIZE_CHUNK_ASSETS] DeprecationWarning: optimizeChunkAssets is deprecated (use Compilation.hooks.processAssets instead and use one of Compilation.PROCESS_ASSETS_STAGE_* as stage option)由于optimize-css-assets-webpack-plugin被弃用，

迁移css-minimizer-webpack-plugin， 15. webpack5不再自动注入node的核心模块，如fs, stream等，如果有使用，需要扩展webpack.config配置，eg.

module.exports = {
  //...
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      buffer: require.resolve('buffer'),
      console: require.resolve('console-browserify'),
      constants: require.resolve('constants-browserify'),
      crypto: require.resolve('crypto-browserify'),
      domain: require.resolve('domain-browser'),
      events: require.resolve('events'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify/browser'),
      path: require.resolve('path-browserify'),
      punycode: require.resolve('punycode'),
      process: require.resolve('process/browser'),
      querystring: require.resolve('querystring-es3'),
      stream: require.resolve('stream-browserify'),
      string_decoder: require.resolve('string_decoder'),
      sys: require.resolve('util'),
      timers: require.resolve('timers-browserify'),
      tty: require.resolve('tty-browserify'),
      url: require.resolve('url'),
      util: require.resolve('util'),
      vm: require.resolve('vm-browserify'),
      zlib: require.resolve('browserify-zlib'),
    },
  },
};

16. eslint升级至8xx(webstorm2020版本，eslint v8.23.0及以上会报错，只能升级到v8.22.0)
17. ts升级至4xx
18. 插件适配webpack5 webpack5-theme-color-replacer

门店项目升级Webpack5注意事项

1. webpack-theme-color-replacer 插件升级webpack5-theme-color-replacer
2. WebpackManifestPlugin用法变更
3. moment插件忽略语言包变化：

new webpack.IgnorePlugin({
  resourceRegExp: /^./locale$/,
  contextRegExp: /moment$/,
}),