详解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 拖拉缩放效果
Dec 10 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
vue实现树形菜单效果
Mar 19 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
我遇到的参数传递中 双引号单引号嵌套问题
2010/02/11 Javascript
基于Jquery的简单图片切换效果
2011/01/06 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
TypeScript入门-接口
2017/03/30 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
使用webpack搭建react开发环境的方法
2018/05/15 Javascript
Vue组件全局注册实现警告框的实例详解
2018/06/11 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
[05:36]DOTA2 2015国际邀请赛中国区预选赛第四日TOP10
2015/05/29 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
关于Python解包知识点总结
2020/05/05 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
电气技术员岗位职责
2013/11/19 职场文书
总经理岗位职责范本
2014/02/02 职场文书
手工社团活动方案
2014/02/17 职场文书
积极向上的团队口号
2014/06/06 职场文书
婚前协议书范本两则
2014/10/16 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python