Question

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

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

class @WOW
  ...

转化为

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

在全局上下文中执行时，您可以在la new WOW().init()的其他位置调用插件。

我一直在玩imports loader，所以我可以提出要求＆amp;像这样打电话：

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编写的模块中的一个常见问题，但我还没有能够解决问题。

Answer 1

我从来没有能够让require.resolve作为Webpack测试值工作。您可以使用不同的正则表达式来正确匹配NPM模块。

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

Answer 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属性应指向应包装的目标文件（或模块）（以获取自定义this值）或应注入哪些变量（例如imports?$=jquery）。
在这种情况下，我们指的是 wowjs 模块，它将被包装并获得this === window。

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

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

webpack loader导入配置

2 个答案: