详解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 相关文章推荐
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
footer定位页面底部(代码分享)
Mar 07 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
jQuery实现合并表格单元格中相同行操作示例
Jan 28 jQuery
详解Vue源码学习之双向绑定
Apr 10 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 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+mysql保存和输出文件
2006/10/09 PHP
基于mysql的论坛(6)
2006/10/09 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
JavaScript 参考教程
2006/12/29 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
js的2种继承方式详解
2014/03/04 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python实现函数极小值
2019/07/10 Python
ubuntu上安装python的实例方法
2019/09/30 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
丑小鸭教学反思
2014/02/03 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
法学院毕业生求职信
2014/06/25 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers