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

之前试过把jQuery打包进vendor，虽然$好用了，但是jQuery下的一系列插件就叫苦了。你想直接从html中引入jQuery的第三方插件？有点不可能，既然$算是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="bower_components/jquery/dist/jquery.min.js"></script>

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

var $=require(‘jquery’);

$(‘#leftNav’).nail();

最后就是打包普通的第三方插件了。有两种方案，一种是直接用webpack打包到引用到插件的js里去，

这种不用多说，直接引入就行。另一种则是像jQuery一样设置为全局变量，同样的方式引入与使用。

externals: {

artTemplate: 'window.template'},

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

参考博客：

http://www.cnblogs.com/handoing/p/5866830.html

https://www.zhihu.com/question/33448231

https://segmentfault.com/a/1190000006000118