webpack5升級過程遇到的一些坑

版本相關信息

• node: v14.15.0
• npm: 6.14.8
• mac: 10.14.6
• webpack: 5.10.3
• webpack-cli: 4.2.0
• webpack-dev-server: 3.11.0

  "webpack": "^5.10.3",
  "webpack-cli": "^4.2.0",
  "webpack-dev-server": "^3.11.0"

  // .babelrc.js
  module.exports = {
    presets: [
      [
        '@babel/preset-env',
        {
          targets: {
            browsers: ['> 5%', 'IE 10', 'iOS 7', 'Firefox > 20']
          },
          useBuiltIns: 'usage',
          corejs: 3
        }
      ],
      '@babel/preset-react'
    ],
    plugins: [
      '@babel/plugin-transform-runtime',
      '@babel/plugin-proposal-class-properties',
      [
        'import',
        {
          libraryName: 'antd',
          libraryDirectory: 'es'
        }
      ]
    ]
  }

問題

1. Error: Cannot find module 'webpack-cli/bin/config-yargs'

在webpack-cli 4.x中，不能過webpack-dev-server啟動項目了，需要通過webpack serve...或者修改webpack-cli版本改為3.x

  // package.json
  // webpack4.x
  "script": {
    "dev": "webpack-dev-server ...",
  }
  // webpack5.x
  "script": {
    "dev": "webpack serve ...",
  }
  // 降版本
  {
    webpack-cli@3.3.12
  }

2. webpack5中錯誤出現錯誤UnhandledPromiseRejectionWarning: TypeError: webpack.NamedModulesPlugin is not a constructor

  // webpack.config.js

  // webpack4.x
  module.exports = {
    ...
    plugins: [
      ...
      new webpack.NamedModulesPlugin()
    ]
  }

  // webpack5.x
  // 在webpack5.x中，webpack.NamedModulesPlugin的功能已經內置

3. babel配置導致的文件引入錯誤，@babel/runtime

在webpack5.x中，發現很多關於@babel/runtime/helpers/esm的文件引入錯誤，錯誤提示類似下面，通過鎖定@babel/runtime包版本即可

Module not found: Error: Can't resolve './superPropBase' in '/Users/xxx/node_modules/@babel/runtime/helpers/esm'
Did you mean 'superPropBase.js'?
BREAKING CHANGE: The request './superPropBase' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request

  npm install @babel/runtime@7.12.0 -D

4. webpack < 5 used to include polyfills for node.js core modules by default

在運行過程中出現了很多這樣的報錯信息，是由於在webpack5中移除了nodejs核心模塊的polyfill自動引入，所以需要手動引入，如果打包過程中有使用到nodejs核心模塊，webpack會提示進行相應配置

  // webpack.config.js
  module.exports = {
    ...
    resolve: {
      // https://github.com/babel/babel/issues/8462
      // https://blog.csdn.net/qq_39807732/article/details/110089893
      // 如果確認需要node polyfill，設置resolve.fallback安裝對應的依賴
      fallback: {
        crypto: require.resolve('crypto-browserify'),
        path: require.resolve('path-browserify'),
        url: require.resolve('url'),
        buffer: require.resolve('buffer/'),
        util: require.resolve('util/'),
        stream: require.resolve('stream-browserify/'),
        vm: require.resolve('vm-browserify')
      },
      // 如果確認不需要node polyfill，設置resolve.alias設置為false
      alias: {
        crypto: false
      }
    }
  }

5. DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated. BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
   Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
   Mak`e sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.

為html-webpack-plugin這個包導致的⚠️信息，github issue

  npm run html-webpack-plugin@next -D

6. DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback

官方給出的問題原因是webpack-cli這個包的版本導致的，github issue

  // 官方提供的解決方式，修改webpack-cli版本到4.2.0既可
  npm install webpack-cli@4.2.0 --save-dev

不過我在本地創建了一個新的項目，版本信息如下，還是存在上面的那個報錯信息，demo地址github issue

  "webpack": "^5.10.3",
  "webpack-cli": "^4.2.0",
  "webpack-dev-server": "^3.11.0"

7. 業務插件遇到的問題，webpack-merge包遇到的問題

csdn資料

  // 4.x版本
  {
    "webpack-merge": "^4.2.2"
  }
  // webpack.config.js
  const merge = require('webpack-merge')
  const defaultConfig = require('../...')
  const config = merge(defaultConfig, {

  })
  export default config

  // 5.x版本
  {
    "webpack-merge": "^5.7.0"
  }
  const webpackMerge = require('webpack-merge')
  const defaultConfig = require('../...')
  const config = webpackMerge.merge(defaultConfig, {

  })
  export default config

8. 數據流工具recoil好像還不支持在webpack中使用，我們項目里有使用recoil，配置了babel后，一直提示You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

官方答復：guthub issue

9. TypeError: Cannot read property 'tap' of undefined

hard-source-webpack-plugin這個包在版本升級后出現錯誤，github issue

  // webpack.config.js
  // webpack4.x
  const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
  module.exports = {
    ...
    piugins: [
      new HardSourceWebpackPlugin({
        environmentHash: {
          root: process.cwd(),
          directories: [],
          files: ['package-lock.json', 'yarn.lock'],
        },
        cachePrune: {
          maxAge: 2 * 24 * 60 * 60 * 1000,
          sizeThreshold: 50 * 1024 * 1024
        }
      })
    ]
  }
  // webpack5.x
  // https://github.com/mzgoddard/hard-source-webpack-plugin/issues/461
  const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
  module.exports = {
    ...
    piugins: [
      new HardSourceWebpackPlugin(),
      new HardSourceWebpackPlugin.ExcludeModulePlugin([])
    ]
  }

github查看更多好文：https://github.com/xccjk/x-blog
webpack升級日志