向webpack.config.js传递命令行参数

5jvtdoz2  于 2023-03-18  发布在  Webpack
关注(0)|答案(8)|浏览(224)

我有一个简单的webpack.config.js

module.exports = {
  entry: "./app.js",
  output: {
    filename: "bundle.js"
  },
}

我想通过命令行参数传递entryoutput的值,这可能吗?我该怎么做?

2cmtqfgy

2cmtqfgy1#

webpack.config.js也可以导出一个env函数,它可以返回一个conf对象。因此,您可以有一个webpack配置如下:

module.exports = env => {
    return {
        entry: env === "production" ? "./app.js": "app-dev.js",
        output: {
          filename: "bundle.js"
        },
    }
};

然后从命令行(或package.json)调用webpack,如下所示:

webpack --env=production
js4nwp54

js4nwp542#

您可以通过在命令行上传递环境变量来提供自定义参数。在Webpack版本4和版本5之间,此语法已更改。对于此示例,您将调用:
对于Webpack 5
webpack --env entry='./app.js' --env output='bundle.js'
对于Webpack 4
webpack --env.entry='./app.js' --env.output='bundle.js'
对于这两个版本,您可以通过执行以下操作来访问Webpack配置中的环境变量

module.exports = env => ({
  entry: env.entry,
  output: {
    filename: env.output
  },
});
lymnna71

lymnna713#

您也可以使用--env=key=value将多个键-值对传递给您的config:

webpack --env=mode=production --env=branch=develop

或(使用webpack-dev-server进行开发):

webpack serve --env=mode=production --env=branch=develop

webpack.config.js将如下所示:

module.exports = (env) => {
  const mode = env.mode === 'prod' ? 'dev';
  const branch = env.branch ? env.branch : 'develop';

  return {
    entry: mode === 'prod' ? './app.js': 'app-dev.js',
    output: {
      filename: 'bundle.js',
      path: 'dist/' + branch),
    },
  }
}

通过这种方式传递的所有值都可以作为config中的一个对象使用,这使得它们很容易使用。

{ 
  WEBPACK_BUNDLE: true,
  mode: 'production',
  branch: 'feature-x',
  foo: 'bar'
}
lyr7nygr

lyr7nygr4#

您可以使用--env CLI参数将任意参数传递给config。
例如,以下命令:

webpack --env entry=./entry.js --env output=./output.js

将生成以下env对象:

{entry: './entry.js', output: './output.js'}

然后您可以在配置中使用它,如下所示:

module.exports = env => ({
  entry: env.entry,
  output: {
    filename: env.output
  },
});

在此阅读更多信息:Webpack - Environment Variables

4dbbbstv

4dbbbstv5#

您可以使用argv包并设置变量,但必须在module.export之前进行。

q7solyqu

q7solyqu6#

在我看来,传递参数最简单的方法是使用Node. Webpack作为接收参数的一个,您可以将您的命令行参数保存在一个专用的环境变量中(它只存在于会话中):

// webpack.config.js 
process.env.MY_APPLICATION_NAME_ARGS = JSON.stringify(process.argv)

export default {
...

然后在main.js中(您想要解析它们的任何地方),您从专用环境变量中检索命令行参数。

// main.js
const myArgs = JSON.parse(env.MY_APPLICATION_NAME_ARGS )

由于您将检索传递给Webpack的所有参数,因此,您将能够使用任何节点模块(例如yargs)轻松地解析它们(当然也可以手动解析)。
因此,您可以毫无问题地执行以下操作:
一个二个一个一个
等等。

wlsrxk51

wlsrxk517#

我有一个解决方案,为那些使用ES模块的Webpack配置。当我们logprocess.argv有一个参数数组,我们可以检查,如果我们需要的一个或没有。
例如:

{
  "scripts": {
    "watch:foo": "webpack --watch --env foo"
  },
}

对于上面的命令,我们需要做的就是检查process.argv是否有我们传递的参数:

const isFoo = process.argv.indexOf('foo') > -1;
yb3bgrhw

yb3bgrhw8#

如果您通过npm调用webpack,您可以简单地调用:

npm run watch --some_option=value

然后访问该值并在webpack.config.js中提供默认值,方法是:

const some_option = process.env.npm_config_some_option || 'defaultValue'

相关问题