详解webpack的配置文件entry与output


Posted in Javascript onAugust 21, 2017

本文介绍了webpack的配置文件entry与output,分享给大家,具体如下:

在webpack.config.js中entry是唯一入口文件

详解webpack的配置文件entry与output

entry也可以是一个数组

详解webpack的配置文件entry与output

如果是一个数组,会将数组里面的文件一起打包到bundle.js

entry也可以是一个对象。

详解webpack的配置文件entry与output

如果output里filename有三个值:

.[name]是文件名字是entry的键值。

.[hash]是md5加密的值。

.[chunkhash]这里是作为版本号使用。

详解webpack的配置文件entry与output

每次修改文件,运行之后,都会生成不一样的hash 于chunkhash值,方便上线时静态资源的版本管理。

文件名如果每次运行都是变化的,文件引入的名字也需要变化,使用install html-webpack-plugin插件,安装npm install html-webpack-plugin --save-dev

完成之后在webpack.config.js文件里面添加plugins键:

详解webpack的配置文件entry与output

plugins的值是一个<strong>数组</strong>,里面的值都是 new htmlWebpackPlugin(),参数一个配置数组,如下:

  • title: 用来生成页面的 title 元素
  • filename: 输出的 HTML 文件名,默认是 index.html, 也可以直接配置带有子目录。
  • template: 模板文件路径,支持加载器,比如 html!./index.html
  • inject: true | 'head' | 'body' | false  ,注入所有的资源到特定的 template 或者 templateContent 中,如果设置为 true 或者 body,所有的 javascript 资源将被放置到 body 元素的底部,'head' 将放置到 head 元素中。
  • favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。
  • minify: {} | false , 传递 html-minifier 选项给 minify 输出
  • hash: true | false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件,对于解除 cache 很有用。
  • cache: true | false,如果为 true, 这是默认值,仅仅在文件修改之后才会发布文件。
  • showErrors: true | false, 如果为 true, 这是默认值,错误信息会写入到 HTML 页面中
  • chunks: 允许只添加某些块 (比如,仅仅 unit test 块)
  • chunksSortMode: 允许控制块在添加到页面之前的排序方式,支持的值:'none' | 'default' | {function}-default:'auto'
  • excludeChunks: 允许跳过某些块,(比如,跳过单元测试的块)

最终生成

详解webpack的配置文件entry与output

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使Ext的Template可以解析二层的json数据的方法
Dec 22 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
node-http-proxy修改响应结果实例代码
Jun 06 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
如何通过简单的代码描述Angular父组件、子组件传值
Apr 07 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 #jQuery
原生JS 购物车及购物页面的cookie使用方法
Aug 21 #Javascript
webpack3+React 的配置全解
Aug 21 #Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 #Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 #Javascript
Vue编写多地区选择组件
Aug 21 #Javascript
使用vue制作FullPage页面滚动效果
Aug 21 #Javascript
You might like
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
Python程序设计入门(4)模块和包
2014/06/16 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
Random 在 Python 中的使用方法
2018/08/09 Python
Python Web版语音合成实例详解
2019/07/16 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
sklearn的predict_proba使用说明
2020/06/28 Python
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
C++是不是类型安全的
2014/02/18 面试题
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
优秀员工事迹材料
2014/12/20 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
Go语言并发编程 sync.Once
2021/10/16 Golang
永中文档在线转换预览基于nginx配置部署方案
2022/06/10 Servers