Webpack V4升级到V5问题总结

升级初衷

升级的原因无外乎两点：

1. 打包速度的提升
2. 紧跟时代潮流

此文档不再赘述官网升级（参考官网升级）的事项，仅对升级过程中遇到的问题进行描述和解决方案输出，希望可以帮助到你～

问题记录

1. devServer配置相关

1.1 stats 属性不再支持，删除

1.2 after 属性不再支持，修改如下：

   - after: () => {
   -  opn(`http://${dev.local}:${dev.port}/dist/web#/`);
   - },
   + open: [`http://${dev.local}:${dev.port}/dist/web#/`],
复制代码

1.3 disableHostCheck 属性不再支持，修改如下：

    - disableHostCheck: true
    + allowedHosts: [
    +  'dev.jd.com',
    +  `${pre.apiTargetHost}`,
    +  `${pre.crowdHost}`,
    +  `${dev.apiTargetHost}`,
    +  `${dev.crowdHost}`,
    + ],
复制代码

2. NamedModulesPlugin is not a constructor

修改配置：

plugin: [
    ...
    - new webpack.NamedModulesPlugin(),
    ...
]
optimization: {
    ...
    + moduleIds: 'named',
    ...
}
复制代码

3. url-loader css中的图片找不到路径

output: {
    ...
    + assetModuleFilename: `${_project}/images/[hash:8][name].[ext]`,
},

module: {
    rules: [
        ...
        {
        test: /\.(jpe?g|png|gif|ico)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              - name: _project + '/images/[hash:8][name].[ext]',
              esModule: false
            }
          },
        ],
        + type: 'javascript/auto',
       },
       ...
    ]
}
复制代码

4. Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'prototype') at Object.../../node_modules/safer-buffer/safer.js

具体原因不明确，安装buffer组件后问题解决。

yarn add buffer -S

5. BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

在运行过程中出现了很多这样的报错信息，是由于在webpack5中移除了nodejs核心模块的polyfill自动引入，所以需要手动引入，如果打包过程中有使用到nodejs核心模块，webpack会提示进行相应配置。

resolve: {
    ...
    + fallback: {
    +  path: false,
    +  buffer: false,
    +  zlib: false,
    +  asserts: false,
    +  stream: false,
    +  util: false,
    +  url: require.resolve('url'),
    + },
  },
复制代码