webpack3更新为webpack5

本文主要是介绍webpack3更新为webpack5，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

node_modules/webpack/node_modules/schema-utils/dist/validate.js:105throw 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

这篇关于webpack3更新为webpack5的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---