Question

我遵循基于these项目（官方Vue Webpack模板）的this指示。

这就是我所做的：

package.js：

"scripts": {
  "dev": "node build/dev-server.js",
  "dev-alt": "node build/dev-server.js && set arg=alt&&webpack"
},

webpack.base.config.js：

// npm run dev-alt in the terminal 
console.log('ARGS:', process.env.arg)

但ARGS:输出undefined。

这样做的正确方法是什么？

Answer 1

使用 Webpack 5.x 及更高版本，您不能再像 --myarg=val 那样将自定义参数传递给 Webpack。但是您仍然可以传递支持的参数，例如 --mode=production。

那么自定义 args 的解决方案是什么？相反，我们需要像这样编写它，使用新的 --env 参数。

  "build-project": webpack --mode=production --env myarg=val --env otherarg=val

请注意，自定义参数在我们将 -- 放在它们之前后不再以 --env 开头。您需要将 --env 放在您需要定义的每个自定义键/值对之前。

你还需要修改你的 Webpack 配置来导出一个函数，而不是一个对象。

请参阅此示例代码，taken from the docs.

const path = require('path');

module.exports = (env) => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

Answer 2

你可以传递你想要的任何参数：

node my-script.js --myArgs thisIsTheValue

在my-script.js中，您可以通过以下方式检索参数：

function getArg(key, defaultVal) {
    var index = process.argv.indexOf(key),
        next = process.argv[index + 1];

    defaultVal = defaultVal || null;

    return (index < 0) ? defaultVal : (!next || next[0] === "-") ? true : next;
}

var theArgsIWant = getArg('--myArgs', 'this is the default if argument not found');

Answer 3

从您描述的文章：

"scripts": {
  "webpack-quizMaker": "set arg=quizMaker&&webpack",
  "webpack-quiz": "set arg=quiz&&webpack"
}

这些sc sc正在做两件事：

如果您不使用PowerShell，他们将以仅适用于Windows的方式设置环境变量。建议在这里使用cross-env。
设置envinronment变量后，它们正在运行webpack。

然后，在webpack配置中，他们正在读取环境变量：

if (process.env.arg == "quiz") {
    // do your thing
}

if (process.env.arg == "quizMaker") {
     // do your thing
};

我建议您安装cross-env

npm install --save-dev cross-env

用这个替换脚本：

"scripts": {
  "webpack-quizMaker": "cross-env arg=\"quizMaker\" webpack",
  "webpack-quiz": "set arg=\"quiz\" webpack"
}

不再需要&&，因为cross-env会在设置env变量后调用指定的命令（webpack）。

Answer 4

在yourdomain.com中用--key=value传递webpack参数

package.json

像这样访问"scripts": { "build": "webpack --mode=production --browser=firefox", }中的argv

webpack.config.js

Answer 5

您可以尝试以下方法：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M495.9,425.3H16.1c-5.2,0-10.1,2.9-12.5,7.6c-2.4,4.7-2.1,10.3,0.9,14.6l39,56.4c2.6,3.8,7,6.1,11.6,6.1h401.7   c4.6,0,9-2.3,11.6-6.1l39-56.4c3-4.3,3.3-9.9,0.9-14.6C506,428.2,501.1,425.3,495.9,425.3z M449.4,481.8H62.6L43,453.6H469   L449.4,481.8z"/><path d="M158.3,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1c-7.8,0-14.1,6.3-14.1,14.1v64.5   C144.2,115.7,150.5,122,158.3,122z"/><path d="M245.1,94.7c7.8,0,14.1-6.3,14.1-14.1V16.1c0-7.8-6.3-14.1-14.1-14.1C237.3,2,231,8.3,231,16.1v64.5   C231,88.4,237.3,94.7,245.1,94.7z"/><path d="M331.9,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1s-14.1,6.3-14.1,14.1v64.5   C317.8,115.7,324.1,122,331.9,122z"/><path d="M9.6,385.2c5.3,2.8,11.8,1.9,16.2-2.2l50.6-47.7c56.7,46.5,126.6,71.9,198.3,71.9c0,0,0,0,0,0   c87.5,0,169.7-36.6,231.4-103.2c5-5.4,5-13.8,0-19.2c-61.8-66.5-144-103.2-231.4-103.2c-72,0-142.2,25.6-199,72.5l-50-47.1   c-4.4-4.1-10.9-5-16.2-2.2c-5.3,2.8-8.3,8.7-7.4,14.6l11.6,75L2.2,370.6C1.3,376.5,4.2,382.4,9.6,385.2z M380.9,230.8   c34.9,14.3,67.2,35.7,95.3,63.6c-10.1,10-20.8,19.2-31.9,27.5c-22.4-3.3-29.6-8.8-30.7-9.7c-4-5.7-11.8-7.7-18.1-4.4   c-6.9,3.6-9.5,12.2-5.9,19.1c1.9,3.5,7.3,10.3,22.4,16c-10.1,5.7-20.5,10.7-31.1,15.1C352.4,320.2,352.4,268.6,380.9,230.8z    M36.3,255.6l29.4,27.7c5.3,5,13.6,5.1,19.1,0.3c53.2-47.6,120.7-73.7,190-73.7c26.9,0,53.2,3.9,78.5,11.3   c-29.3,44.6-29.3,102,0,146.6c-25.3,7.4-51.6,11.3-78.5,11.3c-69,0-136.3-26-189.4-73.2c-2.7-2.4-13.4-6.3-19.1,0.3l-30.1,28.3   l5.7-40C42.2,293,36.3,255.6,36.3,255.6z"/><circle cx="398.8" cy="273.8" r="14.1"/></g></svg>
        
<div class="wrapper">
  <h2>LOCAL TAPAS</h2>
  <p></p>
  <ul class="plates">
    <li>Loading Tapas...</li>
  </ul>
  <form class="add-items">
    <input type="text" name="item" placeholder="Item Name" required>
    <input type="submit" value="+ Add Item">
  </form>
  <div class = "buttons">
  <input type="submit" class = "check__all" value="Check All">
  <input type="submit" class = "uncheck__all" value="Uncheck All">
  <input type="submit" class = "clear__all" value="Clear All">
  </div>
</div>

如何将参数传递给webpack.conf.js？

5 个答案: