webpack3更新为webpack5

Posted 2021-09-23 vieber

为提升老vue2项目的webpack编译速度，

node_modules/webpack/node_modules/schema-utils/dist/validate.js:105
    throw new _ValidationError.default(errors, schema, configuration);
    ^

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

升级rules配置

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".

升级

devtool: 'source-map',

context.compiler.plugin("done", share.compilerDone);
	                 ^

TypeError: context.compiler.plugin is not a function

安装

npm install --save-dev mini-css-extract-plugin

升级webpack-dev-middleware

 "webpack-dev-middleware": "^5.0.0"

throw new _ValidationError.default(errors, schema, configuration);
    ^

ValidationError: Invalid options object. Dev Middleware has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'quiet'. These properties are valid:
   object { mimeTypes?, writeToDisk?, methods?, headers?, publicPath?, stats?, serverSideRender?, outputFileSystem?, index? }

注释掉quiet: true

ERROR: Compiling RuleSet failed: A Rule must not have a 'options' property when it has a 'use' property

解决方法

在 Webpack 最新版本中，rules 属性中的配置，可以有 test、exclude、use、include 等字段，但不允许有 options 了；如果需要，可以写成下面这样：

{
  test: /\\.m?js$/,
  exclude: /(node_modules|bower_components)/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']
    }
  }
},

报错

ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'minimize'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, esModule? }

注释掉

// minimize: process.env.NODE_ENV === 'production',