详解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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
jQuery 选择器理解
Mar 16 Javascript
$.format,jquery.format 使用说明
Jul 13 Javascript
jquery触发a标签跳转事件示例代码
Jul 21 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
jQuery Validate初步体验(一)
Dec 12 Javascript
JavaScript中的继承之类继承
May 01 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
Python第三方库的安装方法总结
2016/06/06 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
python实现代码统计器
2019/09/19 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
Python实现点云投影到平面显示
2020/01/18 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
Charlotte Tilbury英国官网:英国彩妆品牌
2017/05/26 全球购物
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
安全资料员岗位职责
2013/12/14 职场文书
群众路线党课主持词
2014/04/01 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
欢迎领导检查标语
2014/06/27 职场文书
公安干警正风肃纪心得体会
2016/01/15 职场文书