Webpack 配置：无效的配置对象。 Webpack 已使用与 API 模式不匹配的配置对象初始化

Question

我第一次尝试设置 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()],
});

Answer 1

在

node: "production"

文件中将

mode: "production"

更改为

webpack.config.development.js

。 通常当你有错误的配置时，它会显示这个错误。您可以检查相应版本的 Webpack 配置Webpack 5

你也使用了

merge

但它接受要合并的配置对象，而在你的情况下

webpack.config.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, {
  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,
    }),
  ]
};

通过使用上面的配置，它构建成功。我在

index.js

和

index.scss

文件中没有任何数据。

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!