webpack loader導入配置

Question

我正在嘗試使用webpack要求wowjs ，這是從coffeescript編譯的瀏覽器插件。

dist/的代碼希望在全局上下文中執行。 所以在coffeescript中，它看起來像：

class @WOW
  ...

轉換為

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

在全局上下文中執行時，這使您可以在其他地方調用new WOW().init()插件。

我一直在和import loader一起玩，所以我可以像這樣進行require＆調用：

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: [{/*...*/}]
  },
  //...
};