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

entry也可以是一个数组

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

entry也可以是一个对象。

如果output里filename有三个值:

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

.[hash]是md5加密的值。

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

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

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

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

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的更多相关文章

  1. webpack中Entry与Output的基础配置

    entry顾名思义,就是打包的入口文件 module.exports = { // 这个文件要做打包,从哪一个文件开始打包 entry: './src/index.js', // 打包文件要放到哪里去 ...

  2. Webpack探索【4】--- entry和output详解

    本文主要讲entry和output相关内容.

  3. webpack学习(五)entry和output的基础配置

    1:entry和output就是打包的入口和出口的两个对象.但是如果入口文件就一个的话(应该说只希望打包出一个脚本文件), entry直接跟一个字符串(入口文件路径)就可以了.如:entry : &q ...

  4. webpack entry和output配置属性

    1.entry entry的三种配置方式: (1)传递字符串: 单个入口语法:传递一个字符串 entry: './src/js/main.js', (2)传递数组 将创建“多个主入口(multi-ma ...

  5. webpack新版本4.12应用九(配置文件之输出(output))

    output 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出.以及在哪里输出你的「bundle.asset 和其他你所打包或使用 webpack 载入的任何内容」. ou ...

  6. webpack——entry,output,plugins,loader,chunk知识

    entry:打包入口 代码的入口,找到依赖模块 打包的入口,webpack去哪个文件找依赖,或是去那个文件依赖的依赖 可以是一个或者多个入口 例如: 1.module.exports={ entry: ...

  7. Vue之webpack的entry和output

    一.文件结构 二.index.html <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. webpack 使用配置文件

    webpack入门     大多数项目会需要很复杂的设置,这就是为什么webpack要支持配置文件.这比在终端中输入大量命令要高效的多,所以让我们常见一个取代CLI选项方式的配置文件 新建 webpa ...

  9. 跟我一起学习webpack使用配置文件(二)

    接着跟我一起学习webpack(一)中的项目来,我们接下来使用配置文件 使用npx webpack -h 我们可以查看webpack的配置参数 从我们在package.json中添加的命令来看,当项目 ...

随机推荐

  1. MyBatis入门实例 ——Mapper.xml(zz)

    <?xml version="1.0" encoding="UTF-8" ?>    <!DOCTYPE mapper        PUBL ...

  2. javascript+dom编程艺术 读后感

    利用上班空闲2,3天把这本书看完了,整体来说,这本书很不错.虽然我js有一定的基础了,jquery基础也会使用,但是我觉得对js应该有个循序渐进的理解,所以还是把js系统的学习一遍.我看技术类的书总数 ...

  3. zabbix监控web应用

    1)web应用监控介绍 使用zabbix自带的web场景可以监控url的状态码,响应时间,url的下载速度,非常的棒 思路:定义模板-->创建应用集--->定义web场景--->定义 ...

  4. C#调用耗时函数时显示进度条浅探

    最近在做一个VSS日志分析工具,使用C#进行开发,在完成了所有功能后,发现,从服务器下载VSS日志非常耗时,因为此,导致工具使用体验不好,所以,准备增加一个进度条.鉴于C#不经常使用,一下子搞个进度条 ...

  5. zoj3988

    zoj3988 题意 如果一个集合 \(\{i,j\}\) 满足 \(i\neq j\) 且 \(a[i]+a[j]\) 是素数,则称之为素数集合. 给出一些数字,这些数字可以组成多种素数集合,从这些 ...

  6. ( 转 ) 什么是 JWT -- JSON WEB TOKEN

    什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点 ...

  7. [UOJ206]Gap

    子任务$1$:直接找到最大值后从两边开始找,一步一步从左右到中间确定所有数,调用次数是$\left\lceil\dfrac n2\right\rceil$ 子任务$2$:先找到最大值$mx$和最小值$ ...

  8. [xsy1100]东舰停战不可避

    没有三点共线 这题的思想来源于JOI2011-2012春季训练合宿Day2T2,原题是个大毒瘤题(p.s.场上有人A,真的可怕),这题作为原题要用到的的一个结论而存在 点有两种颜色,先考虑对所有点做凸 ...

  9. 【LCA倍增】POJ1330-Nearest Common Ancestors

    [知识点:离线算法&在线算法] 一个离线算法,在开始时就需要知道问题的所有输入数据,而且在解决一个问题后就要立即输出结果. 一个在线算法是指它可以以序列化的方式一个个的处理输入,也就是说在开始 ...

  10. Mysql-库的基本操作

    一 .系统数据库 二 .创建数据库 三 .数据库相关操作 一. 系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信 ...