详解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 Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
AngularJS 基础ng-class-even指令用法
Aug 01 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 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
MySQL相关说明
2007/01/15 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
微信支付开发发货通知实例
2016/07/12 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
Node.js静态文件服务器改进版
2016/01/10 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
Python正则表达式完全指南
2017/05/25 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
中国世界遗产导游词
2015/02/13 职场文书
计算机专业自荐信
2015/03/05 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers