详解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 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
Aug 15 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
openlayers实现地图测距测面
Sep 25 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 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
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
JS计算网页停留时间代码
2014/04/28 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
微信小程序实现基于三元运算验证手机号/姓名功能示例
2019/01/19 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python实现字符串反转的常用方法分析【4种方法】
2017/09/30 Python
python中的随机函数random的用法示例
2018/01/27 Python
python中的decorator的作用详解
2018/07/26 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
java判断三位数的实例讲解
2019/06/10 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
《商鞅南门立木》教学反思
2014/02/16 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
2014年司法所工作总结
2014/11/22 职场文书
中秋客户感谢信
2015/01/22 职场文书
党内外群众意见范文
2015/06/02 职场文书
手把手教你使用TensorFlow2实现RNN
2021/07/15 Python
Spring中bean集合注入的方法详解
2022/07/07 Java/Android