详解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 String 的扩展方法集合
Jun 01 Javascript
基于jQuery的实现简单的分页控件
Oct 10 Javascript
jQuery1.6 类型判断实现代码
Sep 01 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
jQuery实现精美的多级下拉菜单特效
Mar 14 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 Javascript
详解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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
PHP memcache扩展的三种安装方法
2009/04/26 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
PHP调用接口用post方法传送json数据的实例
2018/05/31 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
2016/12/17 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
vue2组件之select2调用的示例代码
2017/10/12 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
2019/07/04 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
python计算书页码的统计数字问题实例
2014/09/26 Python
详解Python中expandtabs()方法的使用
2015/05/18 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
思想汇报格式
2014/01/05 职场文书
公司新年寄语
2014/04/04 职场文书
运动会口号8字
2014/06/07 职场文书
考试作弊检讨书
2015/01/27 职场文书