本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
