将变量注入到Webpack中

Question

我希望在webpack捆绑包的每个模块中注入一个变量，以便针对每个文件获取JS错误的调试信息。我已经启用了

node: {
   __filename: true
}

在webpack中获取当前文件路径

在我的webpack.config中，但我想要注入一些类似于

var filename = 'My filename is: ' + __filename;

在编译之前将脚本注入到每个模块中。我看过Banner Plugin的raw选项，但似乎这只会在webpack闭包之外注入脚本，而我想要的结果是将脚本注入到每个模块中。

- dtothefp

Answer 1

我使用变量来解决webpack.config.js文件中的一些变量：

plugins: [
    new webpack.DefinePlugin({
      ENVIRONMENT: JSON.stringify(process.env.NODE_ENV || 'development'),
      VERSION: JSON.stringify(require('./package.json').version)
    })
]

它可能不够动态，但如果是的话，你也许可以绕过那个加载器解决方案。

- Marcus Rådell

---

为了动态传递变量，您仍然可以使用此插件。在构建时只需这样说：webpack --define myurl="http://localhost:3000" - Richard

为什么要在process.env.NODE_ENV上使用JSON.stringify？ - Ryder Bergerud

如果在代码中使用VERSION作为变量，并且没有使用JSON.stringify（或其他添加引号的机制），那么你最终会得到类似这样的结果（编译器错误）：console.log（VERSION）-> console.log（1.0.0），而你想要的是console.log（“1.0.0”）。 - Prasad Silva

我认为这是最好的方法。 - Hitori

Answer 2

编写自己的加载器：

my_project/my_loaders/filename-loader.js:

module.exports = function(source) {
  var injection = 'var __filename = "' + this.resourcePath + '";\n';
  return injection + source;
};

把它添加到你的管道中，并确保也添加了配置：

resolveLoader: {
  modulesDirectories: ["my_loaders", "node_modules"]
}

请查看有关编写加载器的文档。

- Ricardo Stuven

---

我创建了这个加载器 https://github.com/optimizely/marketing-website/blob/dfoxpowell/jordan-webpack-try/loaders/inject-filename-loader.js，它的效果非常好，但是在我们的生产CI构建中出现了某些原因导致它无法工作。我在这里发布了一个问题 http://stackoverflow.com/questions/29850802/webpack-loader-not-working-on-jenkins-ci-build，如果你有任何想法，请告诉我，这让我感到疯狂？ - dtothefp