如何从CLI向webpack.config.js传递自定义变量

下面提供两种可靠的方案，实现执行npm run watch -- http://site.local并在Webpack配置中访问该URL：

方案一：使用Webpack环境变量（推荐） #

这种方式符合Webpack官方推荐的参数传递规范，配置更清晰。

1. 修改package.json中的npm脚本
   将watch脚本调整为接收--env参数的形式：

   "scripts": {
     "watch": "webpack watch --env siteUrl="
   }
   

2. 调整Webpack配置文件为函数形式
   Webpack支持将配置导出为函数，接收环境变量参数，你可以直接从中提取传入的URL：

   const path = require('path');
   const webpack = require('webpack');
   
   module.exports = (env) => {
     // 取传入的URL，没有则用默认值兜底
     const siteUrl = env.siteUrl || 'http://localhost:3000';
   
     return {
       entry: './src/index.js',
       output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'dist')
       },
       // 示例：在DefinePlugin中注入URL，让业务代码也能直接使用
       plugins: [
         new webpack.DefinePlugin({
           SITE_URL: JSON.stringify(siteUrl)
         })
       ],
       // 其他Webpack配置项...
     };
   };
   

3. 执行命令
   直接运行你想要的命令即可：

   npm run watch -- http://site.local
   

方案二：直接解析命令行参数 #

如果不想使用Webpack的环境变量机制，也可以直接从process.argv中提取参数：

1. 修改Webpack配置文件
   从Node.js的process.argv数组中筛选出URL参数：

   const path = require('path');
   const webpack = require('webpack');
   
   // 提取命令行中http开头的参数作为URL，无则用默认值
   const args = process.argv.slice(2);
   const siteUrl = args.find(arg => arg.startsWith('http')) || 'http://localhost:3000';
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist')
     },
     plugins: [
       new webpack.DefinePlugin({
         SITE_URL: JSON.stringify(siteUrl)
       })
     ],
     // 其他Webpack配置项...
   };
   

2. 执行命令
   同样运行你的目标命令：

   npm run watch -- http://site.local
   

关于之前cross-env失败的说明 #

cross-env是用来设置环境变量的，若要配合你的命令格式使用，需要调整npm脚本为：

"scripts": {
  "watch": "cross-env SITE_URL=$1 webpack watch"
}

此时执行命令需要去掉--，写成：

npm run watch http://site.local

但这种方式不符合你原本期望的命令格式，因此更推荐前两种方案。

另外，之前Webpack报错"配置对象不符合API schema"，大概率是因为你在处理参数时未设置默认值，导致配置项出现undefined等非法值。确保所有配置字段都有合法的兜底值即可避免该问题。

内容的提问来源于stack exchange，提问作者Chris Morris