在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. Selenium2+python自动化73-定位的坑:class属性有空格【转载】

    前言 有些class属性中间有空格,如果直接复制过来定位是会报错的InvalidSelectorException: Message: The given selector u-label f-dn ...

  2. poj 1584(综合性强的计算几何,好题)

    A Round Peg in a Ground Hole Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6238   Acc ...

  3. 【cocos2d-js官方文档】二、资源管理器Assets Manager

    这篇文档将介绍Cocos2d-JS 3.0的一个重量级新特性:资源管理器(仅支持JSB).资源管理器是为游戏运行时的资源热更新而设计的,这里的资源可以是图片,音频甚至游戏脚本本身.使用资源管理器,你将 ...

  4. python 根据文件创建时间排序

    #coding:utf8 import os,time directory = "d:/scrapy tutorial/" t = [] d = {} for filename i ...

  5. HDU 2521 反素数(数论,比较)

    #include<iostream> #include<cstring> #include<cmath> #include<cstdio> using ...

  6. CodeForces - 981G Magic multisets

    假设我们可以对每个位置快速维护一个数组,记录每个位置有哪些值是已经出现了的,哪些值是没有出现的,这样就可以决定修改的时候到底是 *2 还是 +1了. 但是很可惜,并不存在功能这么强大的数组,所以只能另 ...

  7. [UOJ300]吉夫特

    直接上lucas定理,可以得到$\binom nm=1$等价于$m$是$n$的子集(二进制) 因为数字两两不同,所以设$f_i$表示以$i$开头的满足要求的序列有多少个,转移就是$f_i\gets f ...

  8. 【权值分块】bzoj1208 [HNOI2004]宠物收养所

    不多说.比pb_ds还是要快不少的. #include<cstdio> #include<algorithm> #include<cmath> using name ...

  9. 【R实践】时间序列分析之ARIMA模型预测___R篇

    时间序列分析之ARIMA模型预测__R篇 之前一直用SAS做ARIMA模型预测,今天尝试用了一下R,发现灵活度更高,结果输出也更直观.现在记录一下如何用R分析ARIMA模型. 1. 处理数据 1.1. ...

  10. catalina_home与catalina_base

    CATALINA_HOME是Tomcat的安装目 录,CATALINA_BASE是Tomcat的工作目录. 如果我们想要运行Tomcat的多个实例,但是不想安装多个Tomcat软件副本.那么我们可以配 ...