详解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 相关文章推荐
js location.replace与location.reload的区别
Sep 08 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
jQuery获取上传文件的名称的正则表达式
May 21 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 Javascript
vue实现广告栏上下滚动效果
Nov 26 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/03/15 PHP
劣质的PHP代码简化
2010/02/08 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
php json转换相关知识(小结)
2018/12/21 PHP
PDO::_construct讲解
2019/01/27 PHP
js随机生成网页背景颜色的方法
2015/02/26 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python全排列操作实例分析
2018/07/24 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
e路東瀛(JAPANiCAN)香港:日本旅游、日本酒店和温泉旅馆预订
2018/11/21 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
物流仓储实习自我鉴定
2013/09/25 职场文书
银行学习十八大感想
2014/01/11 职场文书
广告设计应届生求职信
2014/03/01 职场文书
安全责任书范文
2014/03/12 职场文书
市场总经理岗位职责
2014/04/11 职场文书