如何组织 npm 脚本和几个 webpack 配置？答案

【问题标题】：How to organize npm scripts and several webpack configs?如何组织 npm 脚本和几个 webpack 配置？
【发布时间】：2019-09-26 08:08:09
【问题描述】：

我在项目中有几个仪表板，我决定在 package.json 中为每个仪表板制作单独的脚本（在开发中，当你只使用一个仪表板时，构建所有仪表板并不是很有用。这需要更多时间）。首先我发现通过脚本可以启动具体的 webpack 配置。所以它看起来像：

"scripts": {
    "dash1": "export NODE_ENV=development && webpack --config=webpack.dash1.config.js  -d --watch --display-error-details export name=employee ",
    "dash2": "export NODE_ENV=production && webpack --config=webpack.dash2.config.js --progress",
    "dash3": "export NODE_ENV=development && webpack --config=webpack.dash3.config.js -d --watch --display-error-details",
}

在这种情况下，我需要有 3 个单独的 webpack 配置文件，我将在其中指定正确的入口文件。但是是否有可能以某种方式在 npm 脚本中传递参数并在 webpack 配置中检查它？也许可以根据 npm-script 参数中的 trnasmitted 对条目进行条件检查？

【问题讨论】：

标签： javascript npm webpack bundle bundler

【解决方案1】：

Webpack 配置文件只是 javascript - 所以任何事情都会发生。在你的情况下，你可以

使用环境变量

https://webpack.js.org/guides/environment-variables/

NODE_ENV=development DASHBOARD=dash1 webpack --config=webpack.config.js

（p.s. 你不需要export blah &&）

为扩展此配置的每个仪表板使用基本配置和配置

config
├── base.config.js
├── dash1.config.js // extends base.config.js
└── dash2.config.js

并使用https://github.com/survivejs/webpack-merge 之类的工具来帮助合并基本配置。

【讨论】：