webpack loader 导入配置答案

【问题标题】：webpack loader imports configurationwebpack loader 导入配置
【发布时间】：2016-10-28 07:43:53
【问题描述】：

我正在尝试使用 webpack 来 require wowjs，这是一个从 coffeescript 编译的浏览器插件。

dist/ 中的代码期望在全局上下文中执行。所以在coffeescript中它看起来像：

class @WOW
  ...

转译为

(function() {
  this.WOW = function() { ... }
}).call(this);

当在全局上下文中执行时，这允许您在其他地方调用插件，例如 new WOW().init()。

我一直在玩imports loader，所以我可以像这样发出请求和调用：

require("imports?this=>window!wowjs")
new window.WOW().init()

请注意，像new WOW().init() 这样的调用将不起作用，因为 webpack 将此代码包装在它自己的模块/上下文中。我可以忍受这个，但我还是觉得我在这里错过了什么？

无论如何，如果我尝试按照文档中的建议将其移至我的webpack.config.js，我将无法使其正常工作。我的配置如下所示：

{ 
  ...
  loaders: [
    {
      test: /wowjs/, loader: "imports?this=>window"
    }
  ],
  ...
}

加载程序部分看起来很简单，但它似乎不起作用。文档使用如下示例：

{ test: require.resolve('wowjs'), loader: 'imports?this=>window' }

但这似乎对我也不起作用。

我一直认为这一定是用 coffeescript 编写的模块中的一个常见问题，但我无法解决任何问题。

【问题讨论】：

标签： javascript webpack loader

【解决方案1】：

我一直无法让require.resolve 用作 Webpack 测试值。您可以改为使用不同的正则表达式来正确匹配 NPM 模块。

{test: /wow.(min.)?js$/, loader: "imports?this=>window"}

【讨论】：

【解决方案2】：

实际上webpack.config.js 中的以下配置应该可以完成这项工作：

"webpack": "^1.13.2"
"imports-loader": "^0.6.5"

{
  // ...
  loaders: [{
     // this should work.
     test: /wowjs/, loader: "imports?this=>window",
     // this also should work (and believe is preferred in this case).
     //test: require.resolve('wowjs'), loader: "imports?this=>window"
  }],
  // ...
}

test 属性应该指向应该被包装的target 文件（或模块）（以获取自定义this 值）或应该注入哪些变量（例如imports?$=jquery） .
在这种情况下，我们指的是 wowjs 模块，它将被包装并获得this === window。

值得一提的是loaders 数组应该驻留在导出配置的module 属性中。目前尚不清楚这是否适用于原案。但这就是当我试图重现行为时没有任何效果的原因，只是复制 loaders 对象并将其粘贴到配置文件中。

module.exports = {
  entry: '...',
  module: {
    loaders: [{/*...*/}]
  },
  //...
};

【讨论】：