有几种方法可以做到这一点。也许最简单的一种是指定要使用的配置文件。阅读更多关于使用配置文件的webpack用法的信息。
在您的package.json中添加另一个脚本：

"build": "webpack --config ./path-to/webpack.config.prod.js"

将生产配置对象放在webpack.config.prod.js中。
另一种方法是使用npm生命周期事件。更新您当前的webpack.config.js脚本以检查目标脚本并确定要使用的配置：

const TARGET = process.env.npm_lifecycle_event;
if (TARGET === 'dev') {
   module.exports = require('./path-to/webpack.config.dev.js');
}
if (TARGET === 'build') {
   module.exports = require('./path-to/webpack.config.prod.js');
}

你可以在GitHub上的webpack-demo项目中找到之前的方法。

几个选项：
1.使用webpack-merge
1.使用多个配置并使用--config-name选项在它们之间进行选择
1.如果你不介意将webpack配置对象（module.exports）更改为here所描述的函数，你可以在webpack.config.js中做如下操作：

module.exports = (env, argv) => {
     return {
        //your config here, do something with the mode
           mode: env.mode
        };
    };

并通过使用--env标志调用webpack将模式传递到您的配置中：

npx webpack --env mode=development

或者像这样将其添加到package.json中：

"scripts": {
      "watch": "webpack --watch --env mode=development",
      "build": "webpack --env mode=production"
    }

不过，如果您只想切换模式，则可以使用--mode标志

npm模块webpack-merge是在webpack中拥有多个配置文件的一种舒适的方式。它允许拥有一个公共配置文件和几个从这个文件“扩展”的其他文件，如下例所示。

正在安装

npm install webpack-merge

通用Webpack配置文件

这将是其他文件之间的公共配置所在的位置。

• webpack.common.js*

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "Output Management",
      template: "src/index.html",
    }),
  ],
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

扩展文件

我决定使用开发和生产配置文件作为示例，但是可以使用任意数量的配置文件。

• webpack.开发工具.js*

const path = require("path");

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "development",
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
  },
});

• 网页包.产品.js*

const { merge } = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
  mode: "production",
});

在这两个脚本中，您都导入了merge函数，并使用它来创建您的文件，而不必复制代码。在您的脚本中，您可以简单地像这样调用扩展配置文件。

• 包.json*

...
"scripts": {
  "build": "webpack --config webpack.prod.js",
  "dev": "webpack serve --config webpack.dev.js"
},
...

在监视模式下，您可以从package.json运行带有NODE_ENV前缀的webpack，例如：

{
  ...
  "scripts": {
    "watch": "NODE_ENV=development webpack --watch",
    "build": "NODE_ENV=production webpack",
    ...
  }
}

然后使用webpack.config.js中预设值（process.env.NODE_ENV）：

const mode = process.env.NODE_ENV;

const config = {
  mode,
  // ... common configuration
};

if (mode === 'development') {
  // update config object for development
} else if (mode === 'production') {
  // update config object for production
}

module.exports = config;