详解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 function调用时的参数检测常用办法
Feb 26 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
Vue 全局loading组件实例详解
May 29 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
layui的table中显示图片方法
Aug 17 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
详解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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
浅谈jquery回调函数callback的使用
2015/01/30 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
javascript中关于&& 和 || 表达式的小技巧分享
2015/04/10 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python笔记之facade模式
2019/11/20 Python
Python 从attribute到property详解
2020/03/05 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
基于python实现操作git过程代码解析
2020/07/27 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
计算机网络毕业生自荐信
2013/10/01 职场文书
四查四看剖析材料
2014/02/14 职场文书
法定代表人资格证明书
2014/09/11 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
Python PIL按比例裁剪图片
2022/05/11 Python