在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. Cannot open include file: 'libxml/xpath.h': No such file or directory

    在搭建scrapy爬虫框架时,通过pip安装lxml遇到了这个问题,我是用32位的windows搭建爬虫框架,python版本是2.7.12, 解决方案如下: 原因: 在网上各种找原因,有大神是说没安 ...

  2. debian 更换sh的默认链接为bash

    https://blog.csdn.net/mudongliangabcd/article/details/43458895

  3. AC日记——[NOIP2015]运输计划 cogs 2109

    [NOIP2015] 运输计划 思路: 树剖+二分: 代码: #include <cstdio> #include <cstring> #include <iostrea ...

  4. 完全背包【p1832】A+B Problem(再升级)

    Description 给定一个正整数n,求将其分解成若干个素数之和的方案总数. Input 一行:一个正整数n Output 一行:一个整数表示方案总数 素数之和 ? 背包啊. 没一遍切的题都不是水 ...

  5. 16、Django实战第16天:优化url

    今天完成的是一个优化url.... 前面我们所有的url都是配置在一个mxonline.urls.py中.因为我们根据项目实际情况配置了多个app,那么我们相应的url是可以配置在自己的app中的,这 ...

  6. RPD Volume 172 Issue 1-3 December 2016 评论01

    Evaluation of Imaging Dose From Different Image Guided Systems During Head and Neck Radiotherapy: A ...

  7. Xamarin XAML语言教程ContentView视图作为自定义视图的父类

    Xamarin XAML语言教程ContentView视图作为自定义视图的父类 自定义视图的父类:ContentView视图可以作为自定义视图的父类. [示例14-2]以下将自定义一个颜色视图.具体的 ...

  8. java 中==符号的坑

    在某技术群看到这样的一个面试题目: 这是一个4年经验的java 从业者的答案. 你的答案是什么呢? 正确的答案是true. 为什么? 其实当使用String a="a"+" ...

  9. [BZOJ 2817] 波浪

    Link: BZOJ 2817 传送门 Solution: 算是比较神的DP了吧, 首先这个绝对值处理起来很难受,肯定要想办法去掉 于是想到从小到大插入的方式,便不存在绝对值的问题了 插入一个数只有5 ...

  10. 1.5(java学习笔记)this关键字

    this关键字主要有三个作用 1.调用本类中的属性. public class TextThis { public static void main(String[] args){ Person p1 ...