英文:
Webpack Configuration: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema
问题
以下是翻译好的部分：
我正在尝试首次设置Webpack配置。当我运行应用程序时，出现错误消息“配置对象无效。Webpack已使用不匹配API架构的配置对象进行初始化”。以下是我的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 IS_DEVELOPMENT = process.env.NODE_ENV === "dev";const dirApp = path.join(__dirname, "app");const dirImages = path join(__dirname, "images");const dirVideo = path.join(__dirname, "videos");const dirStyles = path.join(__dirname, "styles");const dirShared = path.join(__dirname, "shared");const dirNode = "node_modules";module.exports = {entry: [path.join(dirApp, "index.js"), path.join(dirStyles, "index.scss")],resolve: {modules: [dirApp, dirShared, dirStyles, dirVideo, dirImages, dirNode],},plugins: [new webpack.DefinePlugin({IS_DEVELOPMENT,}),]};
以下是我的webpack.config.development.js文件中的代码：
const path = require("path");const { CleanWebpackPlugin } = require("clean-webpack-plugin");const { merge } = require("webpack-merge");const config = require("./webpack.config");module.exports = merge(config, {node: "production",output: {path: path.join(__dirname, "public"),},plugins: [new CleanWebpackPlugin()],});
英文:
I am trying to setup a webpack configuration for the first time. I am getting the error "Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema" when i run the app. Here is the code in my webpack.config.js file.
const path = require("path");const webpack = require("webpack");const CopyWebpackPlugin = require("copy-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const IS_DEVELOPMENT = process.env.NODE_ENV === "dev";const dirApp = path.join(__dirname, "app");const dirImages = path.join(__dirname, "images");const dirVideo = path.join(__dirname, "videos");const dirStyles = path.join(__dirname, "styles");const dirShared = path.join(__dirname, "shared");const dirNode = "node_modules";module.exports = {entry: [path.join(dirApp, "index.js"), path.join(dirStyles, "index.scss")],resolve: {modules: [dirApp, dirShared, dirStyles, dirVideo, dirImages, dirNode],},plugins: [new webpack.DefinePlugin({IS_DEVELOPMENT,}),]};;
Here is the code in my webpack.config.development.js file
const path = require("path");const { CleanWebpackPlugin } = require("clean-webpack-plugin");const { merge } = require("webpack-merge");const config = require("./webpack.config");module.exports = merge(config, {node: "production",output: {path: path.join(__dirname, "public"),},plugins: [new CleanWebpackPlugin()],});
答案1
得分: 1
Change node: "production" to mode: "production" in webpack.config.development.js file.
I have used the updated configuration.
const path = require("path");const { CleanWebpackPlugin } = require("clean-webpack-plugin");const { merge } = require("webpack-merge");const config = require("./webpack.config");module.exports = merge(config, {mode: "production",output: {path: path.join(__dirname, "public"),},plugins: [new CleanWebpackPlugin()],});
const path = require("path");const webpack = require("webpack");const CopyWebpackPlugin = require("copy-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const IS_DEVELOPMENT = process.env.NODE_ENV === "dev";const dirApp = path.join(__dirname, "app");const dirImages = path.join(__dirname, "images");const dirVideo = path.join(__dirname, "videos");const dirStyles = path.join(__dirname, "styles");const dirShared = path.join(__dirname, "shared");const dirNode = "node_modules";module.exports = {entry: [path.join(dirApp, "index.js"), path.join(dirStyles, "index.scss")],resolve: {modules: [dirApp, dirShared, dirStyles, dirVideo, dirImages, dirNode],},plugins: [new webpack.DefinePlugin({IS_DEVELOPMENT,}),]};
By using the above configuration, it builds successfully. I don't have any data in index.js and index.scss files.
Webpack stats: asset main.js 0 bytes [emitted] [minimized] (name: main)
./app/index.js 1 bytes [built] [code generated]
./styles/index.scss 1 bytes [built] [code generated]
webpack 5.78.0 compiled successfully in 170 ms
Your app is compiled in production mode in /dist. It's ready to roll!
英文:
Change node: "production" to mode: "production" in webpack.config.development.js file.
Generally when you have wrong configuration then it will show this error. You can check configuration of Webpack at respective version Webpack 5
Also you used merge but it accept the config object to be merge while in your case webpack.config.js do not export any configuration.
I have used the updated configuration.
const path = require("path");const { CleanWebpackPlugin } = require("clean-webpack-plugin");const { merge } = require("webpack-merge");const config = require("./webpack.config");module.exports = merge(config, {mode: "production",output: {path: path.join(__dirname, "public"),},plugins: [new CleanWebpackPlugin()],});
const path = require("path");const webpack = require("webpack");const CopyWebpackPlugin = require("copy-webpack-plugin");const MiniCssExtractPlugin = require("mini-css-extract-plugin");const IS_DEVELOPMENT = process.env.NODE_ENV === "dev";const dirApp = path.join(__dirname, "app");const dirImages = path.join(__dirname, "images");const dirVideo = path.join(__dirname, "videos");const dirStyles = path.join(__dirname, "styles");const dirShared = path.join(__dirname, "shared");const dirNode = "node_modules";module.exports = {entry: [path.join(dirApp, "index.js"), path.join(dirStyles, "index.scss")],resolve: {modules: [dirApp, dirShared, dirStyles, dirVideo, dirImages, dirNode],},plugins: [new webpack.DefinePlugin({IS_DEVELOPMENT,}),]};
By using above configuration it build successfully. I don't have any data in index.js and index.scss file.
Webpack stats: asset main.js 0 bytes [emitted] [minimized] (name: main)./app/index.js 1 bytes [built] [code generated]./styles/index.scss 1 bytes [built] [code generated]webpack 5.78.0 compiled successfully in 170 msYour app is compiled in production mode in /dist. It's ready to roll!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论