如何将参数从Web Pack传递到代码？

Question

我有一个gulp任务，需要使用yargs输入参数 location 。而且我使用webpack为我的应用程序提供了入口点

 webpackConfig.entry.push('BootStrapper.ts');

我有一个webpack配置，其中有指向引导程序的入口。

module.exports = {
entry: [],
output: {
    path: require("path").resolve('./dist/'),
    filename: 'MyProcess.built.js'
 },
}

我想将变量 location 传递给Bootstrapper.ts，有没有办法实现？

Answer 1

是的，有。

首先，调整您的 webpack配置以接收参数：

{
  plugins: [
    new webpack.DefinePlugin({
      'process.env.YOUR_UNIQUE_VARIABLE': JSON.stringify(process.env.YOUR_UNIQUE_VARIABLE)
    )
  ]
}

然后，在您的 Bootstrapper.ts 中，您可以编写如下内容：

const buildVariable = process.env.YOUR_UNIQUE_VARIABLE;

如果您现在运行Webpack脚本（假设运行一个npm脚本），则将变量传递给：

cross-env YOUR_UNIQUE_VARIABLE=value webpack

您的代码将被编译为：

const buildVariable = 'value';