webpack4升级webpack5

首先来个忠告，先升级webpack，再逐步把各个包升级（因为我们所有依赖升级最新版本，不过可能会带来个问题，包不稳定只能等作者更新，算激进派）

去掉 new webpack.NamedModulesPlugin(), webpack5已内置；

module.exports.node 去掉，需要配置在 resolve.fallback 下，如有需要的，则配置一下：

因为webpack5更专注于浏览器，将node部分移除

fallback: {
      dgram: false,
      fs: false,
      net: false,
      tls: false,
      child_process: false,
      stream: require.resolve('stream-browserify'),
      tty: require.resolve('tty-browserify'),
      crypto: require.resolve('crypto-browserify'),
    },

alias配置 process: 'process/browser',

alias: {

      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      'react-native': 'react-native-web',
      // crypto: false,
      process: 'process/browser',
    },

plugins下增加：

new webpack.ProvidePlugin({
      process: 'process/browser',
    }),

postcss-loader配置更改

// 旧的配置：
{
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  flexbox: 'no-2009',
                }),
              ],
            },
          },

// 新的配置：
{
                loader: require.resolve('postcss-loader'),
                options: {
                  postcssOptions: {
                    plugins: [
                      require('postcss-flexbugs-fixes'),
                      autoprefixer({
                        flexbox: 'no-2009',
                      }),
                    ],
                  },
                },
              },

如果有用到webpack-cli 请升级到最新可用的版本。

提示loaders不存在，改为分别require

{

test: /\.scss$/,

use: [

require.resolve('style-loader'),

require.resolve('css-loader'),

require.resolve('sass-loader'),

],

// loaders: ['style-loader', 'css-loader', 'sass-loader']

},

loader: 'url-loader?limit=1234',

参数形式已废除，改为

options: {

limit: 1234,

},

const { merge } = require('webpack-merge');

module.exports = merge(

改为：

const webpackMerge = require('webpack-merge');

module.exports = webpackMerge.merge(

提示

outputFileSystem.mkdirp is not a function

自己引入一下

const mkdirp = require('mkdirp');

配置下：

let compiler = webpack(config);

compiler.outputFileSystem.mkdirp = mkdirp;

原因看了下，现在的webpack5去掉了mkdirp（webpack安装目录--》node文件夹下的某个文件内），可能导致了一些兼容问题，没找到具体影响哪个包。

报错：

No package 'libsecret-1' found

安装对应包即可

ts报错： Property 'contentRect' must be of type 'DOMRectReadOnly', but here has type 'DOMRectReadOnly'.

因为类型冲突：

自己代码中用到则：

const ResizeObserverPolyfill = require('resize-observer-polyfill');

const observer: ResizeObserver = new ResizeObserverPolyfill();
第三方项目中用到则等作者升级或者降级typescript版本（我的是3.9.7）
typescript报错：类型xxx必须为yyyy，但他是yyy：

Subsequent property declarations must have the same type.  Property 'td' must be of type 'DetailedHTMLProps<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>', but here has type 'DetailedHTMLProps<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>'

此错误一般是版本不一致，将版本锁定到dependencies，参考链接：https://stackoverflow.com/questions/52399839/duplicate-identifier-librarymanagedattributes