详解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 相关文章推荐
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
IE6浏览器中window.location.href无效的解决方法
Nov 20 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
javascript实现时钟动画
Dec 03 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
与数据库连接
2006/10/09 PHP
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
Javascript中常用的检测方法小结
2016/10/08 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python如何判断数独是否合法
2016/09/08 Python
python3实现磁盘空间监控
2018/06/21 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
10张动图学会python循环与递归问题
2021/02/06 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
学期研究性学习个人的自我评价
2014/01/09 职场文书
农村党支部先进事迹
2014/01/14 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
广告学专业求职信
2014/06/19 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
股权转让协议范本
2014/12/07 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python