webpack 第三方插件打包策略

[cobish]

前言

曾经我试过把 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 的普通第三方插件？ 4、如何引入自己编写的插件？

1、如何引入 jQuery？

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

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

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

var $ = require('jquery');

2、如何引入 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();

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

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

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

4、如何引入自己编写的插件？

自己编写的插件目前有两种引入的方式。第一种则是直接引入。但如果几乎所有的 entry 文件都使用到了这一个插件，则可以使用第二种方法，即把它加入 vendor 之中。当然为了避免引入的麻烦，可以给它设置 alias 精简名称。

resolve: {
    alias: {
        cat: path.resolve(__dirname, 'src/cat.js')
    }
},

结语

webpack 没有 requirejs 的那种引入了第三方插件然后可以忽略打包的功能。所以我对于第三方的插件的做法就是以前该怎么引入就怎么引入，在 webpack 中设置一个全局即可。而对于自己编写的，则尽量使用 CommonJS 规范引入进来。

[KarenChuang]

是干货，就是表达好像小学生啊哈哈哈

[cobish]

@KarenChuang 谢谢夸奖。这是暂时能想到的最好的办法，如果有更好的办法记得告诉我。