webpack3更新为webpack5

为提升老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',

报错

Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started

增加mini-css-extract-plugin

SassError: expected "{". root stylesheet

test: /\.scss$/,
                use: [
                    'vue-style-loader',

css加载不出来

test: /\.scss$/,
use: [
    // {
    //     loader: 'style-loader',
    // },
    {
        loader: 'vue-style-loader',
    },
    {
        loader: 'css-loader',
        options: {
            esModule: false
        }
    },
    {
        loader: 'postcss-loader',
        options: {
            config: {
                path: 'postcss.config.js',
            },
        },
    },
    {
        loader: 'sass-loader',
        options: {
            implementation: require('sass'),
        },
    },
],

"vue-style-loader": "^4.1.3",
"css-loader": "^6.2.0",

process/ not found

npm i --save-dev process