webpack如何全局引入jquery和插件?

曾经我试过把 jQuery 打包进 vendor，虽然 $ 好用了，但是 jQuery 下的一系列插件就叫苦了。你想直接从 HTML 中引入 jQuery 的第三方插件？no way！既然 $ 算是 webpack 中的一个变量，那么你只能通过 require 的方式引入 jQuery 的第三方插件。第三方的插件命运只有两个，要不你就被打包进入引入你的 js 文件里，要不你就被引入 vendor 里。

命运一，打包进引入的 js 文件里。如果多个 js 文件都引入了某一个 jQuery 插件，那么就会出现很多重复的代码，冗余。

命运二，打包进 vendor 里。如果都打包进一个 vendor 里，那该文件得多大啊！自己手动配 vendor？你知道哪个插件用到的次数多，哪个用到的少吗？麻烦。

后来我想，干脆第三方的插件我都不加入到 webpack 里，只有自己编写的代码用 webpack 来模块化就行了。第三方插件虽然都单独用了一个 http 请求，但它们改动不大，最终都会被浏览器缓存起来。

说做就做，于是有以下几个需处理的事情：

1、如何引入 jQuery？

2、如何引入 jQuery 插件？

3、如何引入不依赖 jQuery 的普通第三方插件？

jQuery 直接在 html 中引入，然后在 webpack 中把它配置为全局即可。

externals: {
    jquery: 'window.$'
},

使用则直接 require 进来，反正 webpack 也不会把它打包进来。

var $ = require('jquery');

既然 $ 已经被设置为全局了，那么挂载在它下面的一系列 jQuery 插件就好办了，直接在 html 中引入。

<script type="text/javascript" src="./src/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./src/lib/jquery.nail.min.js"></script>

js 中引入 jquery 直接使用即可。

var $ = require('jquery');
$('#leftNav').nail();

最后就是打包普通的第三方插件了。有两种方案，一种是直接用 webpack 打包到引用到插件的 js 里去，这种不用多说，直接引入就行。另一种则是像 jQuery 一样设置为全局变量，同样的方式引入与使用。

externals: {
    artTemplate: 'window.template'
},

webpack 没有 requirejs 的那种引入了第三方插件然后可以忽略打包的功能。所以我对于第三方的插件的做法就是以前该怎么引入就怎么引入，在 webpack 中设置一个全局即可。

官方文档有例子，安装 expose-loader 插件