前端项目工程构建教程(四)脚本与样式的处理

原创 在下乃坑爹君 随笔 WebPack 281阅读 2017-06-30 07:36:22 举报

接下来 试着把之前安装的jquery模块卸载掉,采用另外一种方式
$ npm uninstall jquery --save

卸载了之后,到jquery cnd官方网站找个链接来试试:http://www.bootcdn.cn/jquery/
在index.html文件里插入jquery cnd,这个玩意能起到静态资源加速,可以动态计算离用户最近的服务器,意思就是能提高网站的性能和访问速度~

建议安装1.11.3版本 ,稳定,能支持IE8以上~

前端项目工程构建教程(四)脚本与样式的处理

前端项目工程构建教程(四)脚本与样式的处理

前端项目工程构建教程(四)脚本与样式的处理
同样也可以实现~

但是有个问题!!!

前端项目工程构建教程(四)脚本与样式的处理

这样写的话,结果报错了!!!报错的是找不到jquery模块,这正是之前我叫大家尝试卸载的jquery模块,这是为啥呢?再不添加jquery模块的情况下,该如何解决????

##externals
当我们想在项目中require一些其他的类库或者API,而又不想让这些类库的源码被构建到运行时文件中,这在实际开发中很有必要。此时我们就可以通过配置externals参数来解决这个问题,而且官网文档解释的很清楚,就是webpack可以不处理应用的某些依赖库,使用externals配置后,依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

怎么理解呢?我们先通过官网说的那个jquery的案例来理解。

有时我们希望我们通过script引入的库,如用CDN的方式引入的jquery,我们在使用时,依旧用require的方式来使用,但是却不希望webpack将它又编译进文件中。
javascript 代码

jquery的使用如下
javascript 代码

但是这样写会报错,那么这时,我们便需要配置externals:
javascript 代码

然后再webpack,就成功了,不会报错~

为什么会这样呢?大家可以看看dist文件下里的编译文件index.js里面的一段编译:
javascript 代码

可以看出很明显是把window.jQuery赋值给了module.exports,因此我们便可以使用require来引入了~
这样做既然是模块化开发,当然要杜绝一切全局变量了,我们要用require的方式。

##CommonsChunkPlugin提取公共模块

CommonsChunkPlugin 插件,是一个可选的用于建立一个独立文件(又称作 chunk)的功能,这个文件包括多个入口 chunk 的公共模块。通过将公共模块拆出来,最终合成的文件能够在最开始的时候加载一次,便存起来到缓存中供后续使用。这个带来速度上的提升,因为浏览器会迅速将公共的代码从缓存中取出来,而不是每次访问一个新页面时,再去加载一个更大的文件。

接下来就吧CommonsChunkPlugin加进去吧,然后再webpack,发现dist下面多了个base.js

前端项目工程构建教程(四)脚本与样式的处理

#更新中。。。

评论 ( 1 )
最新评论
zhangqidaxia 2017-07-14 16:37:05 1F

为啥我做到最后一步会报错
javascript 代码