本节知识点
- 抽离jquery
(一) 概述
在上面我们说到了引入第三方类库有两种方法
- 第一种import : 引用后不管你的代码里面适用不适用这个类库。他都加载了。这样影响性能.
- 第二种providePlugin : 引入后只有在类库使用中才按需进行打包
所以推荐第二种
(二) 抽离Jquery
- 第一步: 修改入口文件
entry:{
entry:"./src/entry.js",
jquery:'jquery'
}
- 第二步 : 引入插件
我们需要利用到optimize这个插件
在插件里面配置
//分离jquery
new webpack.optimize.CommonsChunkPlugin({
//入口文件的文字。入口我起的是jquery那么对应的就是jquery
name: 'jquery',
//把文件打包到哪里就一个路径
filename:"assets/js/jquery.min.js",
//最小打包文件的模块数,这里写2就好了
minChunks:2
})
3个选项都是必填的选项
这个时候在重新打包，你就会发现jquery被独立出来了
多个第三方类库抽离
实际开发中我们要引入很多个第三方类库
那我们想抽离出来该怎么做
首先先安装vue 和jquery 刚才上面安装完成了。下面安装的是vue
npm i vue --save
- 第二步在入口文件 引入vue和jquery
//入口配置项
entry:{
entry:"./src/enter.js",
jquery:"jquery",
vue:"vue"
}
- 第三步 修改CommonChunkPlugin配置
我们要做的就是修改两个位置
(1) 在name属性里把原来的字符串变成数组，因此我们需要引入很多个模块，所以是数组
(2) 在filename属性中把我们的输出文件名改为匹配的[name]这样打包出来的名字和我们相对应
//分离jquery和vue
new webpack.optimize.CommonsChunkPlugin({
//入口文件的文字。入口我起的是jquery那么对应的就是jquery
name: ['jquery','vue'],
//把文件打包到哪里就一个路径
filename:"assets/js/[name].js",
//最小打包文件的模块数,这里写2就好了
minChunks:2
})
