详解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 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
jQuery实现垂直半透明手风琴特效代码分享
Aug 21 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 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生成UTF8文件的方法
2010/05/15 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
JS控制表格隔行变色
2006/06/26 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
JavaScript实现的日期控件具体代码
2013/11/18 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
微信小程序开发的基本流程步骤
2019/01/31 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
质检部经理岗位职责
2014/02/19 职场文书
公司寄语大全
2014/04/10 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js