详解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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
vue动态删除从数据库倒入列表的某一条方法
Sep 29 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
JS实现网站吸顶条
Jan 08 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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
PHP查询快递信息的方法
2015/03/07 PHP
php查看当前Session的ID实例
2015/03/16 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
2019/10/23 jQuery
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
从零学Python之入门(五)缩进和选择
2014/05/27 Python
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
快速了解Python开发环境Spyder
2020/06/29 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
论文指导教师评语
2014/04/28 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
2014年单位工作总结范文
2014/11/27 职场文书
python基础之文件操作
2021/10/24 Python