详解webpack打包第三方类库的正确姿势


Posted in Javascript onOctober 20, 2018

webpack 的使用越来越广泛,但其中不乏很多鲜为人知的细节设置,甚至很多人会认为这是 webpack 的 bug。这次,我们就来聊一聊 webpack.optimize.CommonsChunkPlugin。

这个 plugin 我相信几乎90%的用 webpack 的都用了这个,但我同样相信几乎 90% 的用了这个 plugin 的人都没有正确的使用。

entry: {
    index: './app/main.jsx',
    vendor: ['react', 'react-dom', 'react-router', 'classnames']
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "[name].[chunkHash:8].js",
    publicPath: '',
    chunkFilename: "[name].[chunkHash:8].js",
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor'],
    }),
  ]

上面这个配置应该大家都不陌生吧?打包第三方 vendor。

 其实这样写是有问题的。有什么问题呢?我们根据这个配置来操作一下。

 首先,运行起来,我们会得到 vendor.js 的添加 hash 值过后的输出; 

然后,修改index入口里面的任意文件,再次编译,得到 vendor.js 的添加 hash 值过后的输出;

最后,比较 vendor.js 两次编译的hash的值,你会惊讶的发现,为什么hash值改变了?我并没有修改vendor啊。

hash值改变了,那我们打包这个vendor也就没有意义了。

置于为什么会造成这个问题,我就不班门弄斧了,想要知道的人自己去研究一下webpack的底层。

在这里,我只是抛出一个解决方案:

entry: {
    index: './app/main.jsx',
    vendor: ['react', 'react-dom', 'react-router', 'classnames']
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "[name].[chunkHash:8].js",
    publicPath: '',
    chunkFilename: "[name].[chunkHash:8].js",
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest'],
    }),
  ]

没错,就是上面这个配置,只是简单的加了 'manifest' 。

再次做我们前面的测试,你会发现多了一个manifest.js,但是vendor的hash值不再变化了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
js编写简单的计时器功能
Jul 15 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
js函数和this用法实例分析
Mar 13 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
详解ES6 Promise对象then方法链式调用
Oct 20 #Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 #Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
Oct 20 #Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 #Javascript
vue 项目地址去掉 #的方法
Oct 20 #Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 #Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
Oct 20 #Javascript
You might like
php下使用以下代码连接并测试
2008/04/09 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
jquery $(this).attr $(this).val方法使用介绍
2013/10/08 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
jquery点击展示与隐藏更多内容
2016/12/03 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python中异常捕获方法详解
2017/03/03 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
对python模块中多个类的用法详解
2019/01/10 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
年终自我鉴定
2013/10/09 职场文书
银行实习生的自我评价
2013/12/09 职场文书
实用的简历自我评价
2014/03/06 职场文书
求职教师自荐书
2014/06/19 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python