英文:
Webpack 5 Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema
问题
我正在从头开始开发创意网站的课程,不使用任何框架,遵循教程中的代码,并出现以下错误。教程使用的是 webpack: 4.*.*
,而我使用的是最新的稳定版本 webpack: 5.75.*
。
错误信息:
[webpack-cli] 无效的配置对象。Webpack 已经使用与 API 架构不匹配的配置对象进行初始化。
- 配置项 node 应该是以下之一:
false | 对象 { __dirname?, __filename?, global? }
-> 包括各种 Node 相关的填充或模拟。
详情:
* 配置项 node 应该为 false。
* 配置项 node 应该是一个对象:
对象 { __dirname?, __filename?, global? }
-> 用于 Node 兼容性功能的选项对象。
这是我的 webpack.config.js
:
const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const IS_DEVELOPMENT = process.env.NODE_ENV = 'dev';
const dirApp = path.join(__dirname, 'src');
const dirShared = path.join(__dirname, 'shared');
const dirStyles = path.join(__dirname, 'styles');
const dirNode = 'node_modules';
module.exports = {
node: false,
entry: [
path.join(dirApp, 'index.js'),
path.join(dirStyles, 'index.scss')
],
// https://webpack.js.org/configuration/resolve/
resolve: {
modules: [
dirApp,
dirShared,
dirStyles,
dirNode
],
},
plugins: [
new webpack.DefinePlugin({
// 定义...
IS_DEVELOPMENT
}),
new CopyWebpackPlugin({
patterns: [
{
from: './shared',
to: ''
}
]
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
// 自定义选项的无损优化
// 请随时尝试不同的选项以获得更好的结果
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 1 }]
],
},
},
}),
new NodePolyfillPlugin(),
],
module: {
rules: [
{
// 正则表达式
test: /\.js$/,
use: {
loader: 'babel-loader',
}
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ''
}
},
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
},
{
loader: 'sass-loader',
}
]
},
{
test: /\.(jpe?g|png|gif|svg|woff2?|fnt|webp)$/,
loader: 'file-loader',
options: {
name (file) {
return '[contenthash].[ext]';
}
}
},
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
use: [
{
loader: ImageMinimizerPlugin.loader,
options: {
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
"imagemin-gifsicle",
"imagemin-mozjpeg",
"imagemin-pngquant",
],
},
},
},
},
],
},
]
}
}
package.json
:
{
"version": "1.0.0",
"description": "",
"scripts": {
"build": "webpack --progress --config webpack.config.build.js",
"development": "webpack serve --progress --config webpack.config.development.js",
"start": "npm run development"
},
"devDependencies": {
"babel-loader": "^9.1.2",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"file-loader": "^6.2.0",
"image-minimizer-webpack-plugin": "^3.8.1",
"imagemin": "^8.0.1",
"mini-css-extract-plugin": "^2.7.2",
"node-polyfill-webpack-plugin": "^2.0.1",
"postcss-loader": "^7.0.2",
"sass": "^1.58.3",
"sass-loader": "^13.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0"
}
}
我尝试了根据错误信息和文档添加了 node
对象,但不起作用。Webpack Node 文档
node: false | {
__dirname: false,
__filename: false,
global: false
}
英文:
I am doing a course on developing creative website from scratch without using any frameworks and following the instructors code and getting the following error. The instructor is using webpack: 4.*.*
and I am on webpack: 5.75.*
which is the latest stable version.
error
[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.node should be one of these:
false | object { __dirname?, __filename?, global? }
-> Include polyfills or mocks for various node stuff.
Details:
* configuration.node should be false.
* configuration.node should be an object:
object { __dirname?, __filename?, global? }
-> Options object for node compatibility features.
here is my webpack.config.js
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
const IS_DEVELOPMENT = process.env.NODE_ENV = 'dev'
const dirApp = path.join(__dirname, 'src')
const dirShared = path.join(__dirname, 'shared')
const dirStyles = path.join(__dirname, 'styles')
const dirNode = 'node_modules'
module.exports = {
node: false,
entry: [
path.join(dirApp, 'index.js'),
path.join(dirStyles, 'index.scss')
],
// https://webpack.js.org/configuration/resolve/
resolve: {
modules: [
dirApp,
dirShared,
dirStyles,
dirNode
],
},
plugins: [
new webpack.DefinePlugin({
// Definitions...
IS_DEVELOPMENT
}),
new CopyWebpackPlugin({
patterns: [
{
from: './shared',
to: ''
}
]
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 1 }]
],
},
},
}),
new NodePolyfillPlugin(),
],
module: {
rules: [
{
// regular expression
test: /\.js$/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ''
}
},
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(jpe?g|png|gif|svg|woff2?|fnt|webp)$/,
loader: 'file-loader',
options: {
name (file) {
return '[contenthash].[ext]'
}
}
},
{
test: /\.(jpe?g|png|gif|svg|webp)$/i,
use: [
{
loader: ImageMinimizerPlugin.loader,
options: {
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
plugins: [
"imagemin-gifsicle",
"imagemin-mozjpeg",
"imagemin-pngquant",
],
},
},
},
},
],
},
]
}
}
package.json
{
"version": "1.0.0",
"description": "",
"scripts": {
"build": "webpack --progress --config webpack.config.build.js",
"development": "webpack serve --progress --config webpack.config.development.js",
"start": "npm run development"
},
"devDependencies": {
"babel-loader": "^9.1.2",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.7.3",
"file-loader": "^6.2.0",
"image-minimizer-webpack-plugin": "^3.8.1",
"imagemin": "^8.0.1",
"mini-css-extract-plugin": "^2.7.2",
"node-polyfill-webpack-plugin": "^2.0.1",
"postcss-loader": "^7.0.2",
"sass": "^1.58.3",
"sass-loader": "^13.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1",
"webpack-merge": "^5.8.0"
}
}
I did try adding the node object at it mentions in the error and also in the docs but it does not work.
webpack node docs
node: false | {
__dirname: false,
__filename: false,
global: false
}
答案1
得分: 1
My package.json
指向 webpack.config.development.js
,在那里我有一个拼写错误,我写成了 node: 'development'
而不是 mode:development
,这就是为什么会出现上面的错误。
上面的 webpack.config.js
兼容并适用于 webpack:5.75.0
,以下是我的 webpack.config.development.js
以供参考。我希望这对尝试理解 webpack.config.js
的人有所帮助。
const path = require('path')
const { merge } = require('webpack-merge')
const config = require('./webpack.config')
module.exports = merge(config, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
devMiddleware: {
writeToDisk: true
},
},
output: {
path: path.resolve(__dirname, 'public')
}
})
英文:
My package.json
was pointing to the webpack.config.development.js
and in there i had a typo where I had typed node: 'development'
instead of mode:development
and that is why it was throwing the above error.
The above webpack.config.js
is compatible and working with webpack:5.75.0
and below is my webpack.config.development.js
for reference. I hope this is helpful to someone trying to figure out webpack.config.js
const path = require('path')
const { merge } = require('webpack-merge')
const config = require('./webpack.config')
module.exports = merge(config, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
devMiddleware: {
writeToDisk: true
},
},
output: {
path: path.resolve(__dirname, 'public')
}
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论