详解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库还是自己写代码?
Jan 28 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
js清理Word格式示例代码
Feb 13 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
JS中this上下文对象使用方式
Oct 09 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
JavaScript canvas实现文字时钟
Jan 10 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中$_SERVER的详细参数与说明
2008/07/29 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP实现微信提现功能
2018/09/30 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
python并发编程之线程实例解析
2017/12/27 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
深入了解Django View(视图系统)
2019/07/23 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
逻辑链路控制协议
2016/10/01 面试题
亿企通软件测试面试题
2012/04/10 面试题
毕业生如何写自我鉴定
2014/03/15 职场文书
踏青活动策划方案
2014/08/19 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
放牛班的春天观后感
2015/06/01 职场文书
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS