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