详解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与CSS写在同一个文件里的书写方法
Jun 02 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
详解JavaScript执行模型
Nov 16 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
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
广告显示判断
2006/08/31 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
js实现开关灯效果
2020/03/30 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
js实现简单的轮播图效果
2020/12/13 Javascript
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
如何在VSCode上轻松舒适的配置Python的方法步骤
2019/10/28 Python
Python类如何定义私有变量
2020/02/03 Python
500行python代码实现飞机大战
2020/04/24 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
执行总经理岗位职责
2014/02/03 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
教师节晚会主持词
2015/06/30 职场文书
《海上日出》教学反思
2016/02/23 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL