在内存中生成index.html页面

在前面的内容中我们已经知道了如何在内存中打包main.js并引入到页面中。

同样的，我们也可以把index.html也打包放入到内存中。

安装html-webpack-plugin插件

  1. cnpm install html-webpack-plugin -D
  2. 在webpack.config.js中

  3. 重启服务npm run dev即可

为什么要用html-webpack-plugin插件，他有哪些功能？

  1. 他会帮我们自动引入在内存中打包好的bundle.js文件

    每次npm run dev之后都会打开src下的index.html页面，所以如果修改输出的页面为其他名称的页面，比如我们修改输出的filename:'index123.html',则会出现下面的情况



    来个正常的图比较一下：



    你会发现在index.html文件中的下面多了一个script标签，并且引入了正确位置的bundle.js,此时你去注释掉页面中的引入也不影响什么，用了这个插件，我们不会再去配置bundle.js的位置了。

  2. 其他功能以后在补充，很多配置项。

（3）html-webpack-plugin的作用的更多相关文章

  1. 如何开发webpack plugin

    继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...

  2. 揭秘webpack plugin

    前言 Plugin(插件) 是 webpack 生态的的一个关键部分.它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程.这篇文章将尝试探索 webpack plu ...

  3. 简单webpack plugin 开发

    重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...

  4. Webpack Plugin

    [Webpack Plugin] Since Loaders only execute transforms on a per-file basis, plugins are most commonl ...

  5. 案例实战之如何写一个webpack plugin

    案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...

  6. YYDS: Webpack Plugin开发

    目录 导读 一.cdn常规使用 二.开发一个webpack plugin 三.cdn优化插件实现 1.创建一个具名 JavaScript 函数(使用ES6的class实现) 2.在它的原型上定义 ap ...

  7. 【转】Webpack 快速上手（中）

    由于文章篇幅较长,为了更好的阅读体验,本文分为上.中.下三篇: 上篇介绍了什么是 webpack,为什么需要 webpack,webpack 的文件输入和输出 中篇介绍了 webpack 在输入和输出 ...

  8. [转] webpack之plugin内部运行机制

    简介 webpack作为当前最为流行的模块打包工具,几乎所有的主流前端开发框架(React.Vue等)都会将其作为默认的模块加载和打包工具.通过简单的配置项,使用各种相关的loader和plugin, ...

  9. webpack 相关插件及作用（表格）

    webpack 相关插件及作用: table th:first-of-type { width: 200px; } table th:nth-of-type(2) { width: 140px; } ...

  10. 走近webpack（2）--css打包及压缩js

    前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学. 在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口 ...

随机推荐

  1. Happens-Before原则

    Java内存模型是通过各种操作来定义的,包括对变量的读/写操作,监视器的加锁和释放操作,以及线程的启动和合并操作.JMM为程序中所有的操作定义了一个偏序关系,称之为Happens-Before.要想保 ...

  2. CSS中可以继承的元素(需要记住)

    可以继承的属性很少,只有颜色,文字,字体间距行高对齐方式,和列表的样式可以继承. 所有元素可继承:visibility和cursor. 内联元素可继承:letter-spacing.word-spac ...

  3. Linux下安装java环境

    准备工作: linux环境 xshell6 1.在Windows本地www,oracle.com下载对应的linux系统的JDK安装包,我下载的是 2.下载下来后,通过xftp远程传输到linux服务 ...

  4. 【初学Java学习笔记】AOP与OOP

    AOP(Aspect Oriented Programming) 面向切面编程,是属于Spring框架中的内容.AOP相当于OOP的补充,当我们需要对多个对象引入一个公共行为,比如日志,操作记录等,就 ...

  5. ElasticSearch中的sort排序和filedData作用

    默认情况下,ElasticSearch 会根据算分进行排序: 可以使用 sort API 指定排序的规则: POST /kibana_sample_data_ecommerce/_search { & ...

  6. Spring事务深入剖析--spring事务失效的原因

    之前我们讲的分布式事务的调用都是在一个service中的事务方法,去调用另外一个service中的业务方法, 如果在一个sevice中存在两个分布式事务方法,在一个seivice中两个事务方法相互嵌套 ...

  7. activity的四种启动模式详细分析

    1.android中通过任务队列来管理activity 采用栈的结构就是后进先出 手机里面如果启动多个应用就会启动多个任务栈来管理对应的activity. 主要解决下面的问题:对应的四种启动模式: 1 ...

  8. 谈谈 Promise 以及实现 Fetch 的思路

    Promise 是异步编程的一种解决方案. Promise /** * 属性 */ Promise.length Promise.prototype /** * 方法 */ Promise.all(i ...

  9. python从文件载入字典

    data = np.load('dict_.npy') data = data.item() 不加最后一句,data不是字典类型

  10. Apache Dubbo Provider默认反序列漏洞复现（CVE-2020-1948）

    Apache Dubbo Provider默认反序列漏洞(CVE-2020-1948) 0x01 搭建漏洞环境 漏洞介绍 2020年06月23日, 360CERT监测发现Apache Dubbo 官方 ...