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，但正在传递给闭包。我不确定这是否是预期的功能或幸运的黑客攻击，但它似乎对我的使用情况很好。