在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. jquery.qrcode生成二维码支持中文

    基本使用方法: 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.j ...

  2. seneca的一段代码(原创)

    var seneca=require('seneca')() seneca.add({cmd:'wordcount'},function(msg,respond){ var length=0; if( ...

  3. Linux命令之:tr

    1. 用途: tr,translate的简写,主要用于压缩重复字符,删除文件中的控制字符以及进行字符转换操作. 2. 语法: tr [OPTION]... SET1 [SET2] 3. 参数: -s: ...

  4. python与鸭子类型

    部分参考来源:作者:JasonDing  https://www.jianshu.com/p/650485b78d11##s1 首先介绍下面向对象(OOP)的三大特征: (1)面向对象程序设计有三大特 ...

  5. (18)python 打包发布

    1.安装 pyinstaller pip install pyinstaller 2.创建文件 pyinstaller yourprogram.py 试了半天总是报 TypeError: expect ...

  6. centos7下配置samba,win10访问

    yum install -y samba samba-client 更改配置 [root@abcd mnt]# cat /etc/samba/smb.conf [global] workgroup = ...

  7. RobotFramework操作浏览器滚动条

    RobotFramework操作浏览器滚动条 (2016-12-21 11:52:43) 转载▼ 标签: selenium it 分类: 自动化测试 其实只要是用多了selenium+webdrive ...

  8. Servlet 2.3 规范

    Servlet2.3规范 第一章: servlet2.3规范用到了一下的一些规范:J2EE.JSP1.1.JNDI 在14章中讲述了规范中的所有的classes类或接口(改文中不讲述).对开发者而言以 ...

  9. java.lang.NoSuchMethodError:org.hibernate.SessionFactory.openSession()Lorg/hibernate/classic/Session

    项目配置了spring 4.0.6.RELEASE 和hibernate4.2.0.Final ,出错原因是因为在Spring 3.1开始没有了HibernateDaoSupport类,而我的却Dao ...

  10. [luogu3455]ZAP-Queries

    有时候我们会遇到一类问题:求$f(n)$,当然它是不好直接计算的,但如果$F(n)=\sum\limits_{d|n}f(d)$或$F(n)=\sum\limits_{\substack{n|d\\d ...