Webpack ProvidePlugin vs externals？

Question

我在探索使用Webpack和Backbone.js的想法。

我已經按照快速入門指南和Webpack如何工作的一般想法，但我不清楚如何加載依賴庫像jquery/backbone/underscore。

他們應該在外部加載<script>還是Webpack可以像RequireJS的墊片一樣處理？

按照webpack doc: shimming modules，ProvidePlugin和externals似乎與此有關（因此是bundle!裝載機的地方），但我不能想出什麼時候使用。

感謝

Answer 1

這兩種可能：您可以用<script>庫或包含它們到生成的束（即使用一個庫從CDN。）。

如果您通過<script>標記加載標記，則可以使用externals選項允許在模塊中編寫require(...)。

與庫

實施例從CDN：

與庫

<script src="https://code.jquery.com/jquery-git2.min.js"></script> 

// the artifial module "jquery" exports the global var "jQuery" 
externals: { jquery: "jQuery" } 

// inside any module 
var $ = require("jquery"); 

實施例包括在束：

copy `jquery-git2.min.js` to your local filesystem 

// make "jquery" resolve to your local copy of the library 
// i. e. through the resolve.alias option 
resolve: { alias: { jquery: "/path/to/jquery-git2.min.js" } } 

// inside any module 
var $ = require("jquery"); 

---

的ProvidePlugin可以映射模塊（免費）的變量。因此，您可以定義：「每次我在模塊內使用（免費）變量xyz時，您（webpack）應將xyz設置爲require("abc")。」

例無ProvidePlugin：

// You need to require underscore before you can use it 
var _ = require("underscore"); 
_.size(...); 

例與ProvidePlugin：

plugins: [ 
    new webpack.ProvidePlugin({ 
    "_": "underscore" 
    }) 
] 

// If you use "_", underscore is automatically required 
_.size(...) 

---

摘要：

• 從CDN庫：使用<script>標籤和externals選件
• 文件系統庫：將庫包含在軟件包中。 （也許修改resolve選擇找到庫）
• externals：請使用全局變量的模塊
• ProvidePlugin：請可作爲自由變量內部模塊模塊

Answer 2

我知道這是一個老的文章，但思想在這種情況下，提及webpack腳本加載器也可能有用。從webpack文檔：

「腳本：在全局上下文中執行一次JavaScript文件（如在腳本標記中），不需要解析。「

http://webpack.github.io/docs/list-of-loaders.html

https://github.com/webpack/script-loader

遷移舊的構建Concat的JS供應商的文件和應用程序文件放在一起的過程，當我發現這非常有用。一個字的警告是，腳本加載器似乎只是爲了工作，通過重載require()，並且不能通過在webpack.config文件中指定而告訴我們。儘管許多人認爲require超負荷是不好的做法，但它可以非常有用地將供應商和應用程序腳本整合到一個包中，並且同時將JS Globals暴露給另外的webpack bundl ES。例如：

require('script!jquery-cookie/jquery.cookie'); 
require('script!history.js/scripts/bundled-uncompressed/html4+html5/jquery.history'); 
require('script!momentjs'); 

require('./scripts/main.js'); 

這將使$ .cookie，歷史和此刻全球可用的內部，這種捆綁之外，並捆綁與main.js腳本，這些供應商庫和它的所有require d文件。

此外，對於該技術是有用的是：

resolve: { 
    extensions: ["", ".js"], 
    modulesDirectories: ['node_modules', 'bower_components'] 
}, 
plugins: [ 
    new webpack.ResolverPlugin(
    new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) 
    ) 
] 

其使用鮑爾，將着眼於main文件中的每個require d庫的package.json。在上例中，History.js沒有指定main文件，因此文件的路徑是必需的。

Answer 3

一些很酷的東西要注意的是，如果你結合的externals財產使用ProvidePlugin它可以讓你有jQuery傳遞到您的WebPack模塊關閉，而不必明確require它。這對重構遺留代碼很有用，引用$的許多不同文件。

//webpack.config.js 
module.exports = { 
    entry: './index.js', 
    output: { 
    filename: '[name].js' 
    }, 
    externals: { 
    jquery: 'jQuery' 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
    }) 
    ] 
}; 

現在index.js

console.log(typeof $ === 'function'); 

將有類似下面傳遞到webpackBootstrap關閉編譯輸出：

/******/ ([ 
/* 0 */ 
/***/ function(module, exports, __webpack_require__) { 

    /* WEBPACK VAR INJECTION */(function($) { 
     console.log(typeof $ === 'function'); 

    /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(1))) 

/***/ }, 
/* 1 */ 
/***/ function(module, exports, __webpack_require__) { 

    module.exports = jQuery; 

/***/ } 
/******/ ]) 

因此，你可以看到，$被引用來自CDN的全局/窗口jQuery，但正在傳遞給閉包。我不確定這是否是預期的功能或幸運的黑客攻擊，但它似乎對我的使用情況很好。