在内存中生成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. RFID-RC522 模块的读写操作【Arduino】

    接线 Arduino Uno <-> RFID-RC52210 <-> SDA13 <-> SCK11 <-> MOSI12 <-> MIS ...

  2. 浅谈RegExp 对象的方法

    JavaScript RegExp 对象有 3 个方法:test().exec() 和 compile().(1) test() 方法用来检测一个字符串是否匹配某个正则表达式,如果匹配成功,返回 tr ...

  3. 这一次搞懂Spring Web零xml配置原理以及父子容器关系

    前言 在使用Spring和SpringMVC的老版本进行开发时,我们需要配置很多的xml文件,非常的繁琐,总是让用户自行选择配置也是非常不好的.基于约定大于配置的规定,Spring提供了很多注解帮助我 ...

  4. 绕过PowerShell执行策略方法总结

    默认情况下,PowerShell配置为阻止Windows系统上执行PowerShell脚本.对于渗透测试人员,系统管理员和开发人员而言,这可能是一个障碍,但并非必须如此. 什么是PowerShell执 ...

  5. 初识MQ消息队列

    MQ 消息队列 消息队列(Message Queue)简称MQ,是阿里巴巴集团中间件技术部自主研发的专业消息中间件. 产品基于高可用分布式集群技术,提供消息发布订阅.消息轨迹查询.定时(延时)消息.资 ...

  6. JavaWeb网上图书商城完整项目--验证码

    1.首先需要集成下面的jar 2.在web.xml配置验证码的servlet <?xml version="1.0" encoding="UTF-8"?& ...

  7. 00【笔记】 Shiro登陆过滤提示信息

    Shiro登陆过滤 提示信息 package top.yangbuyi.system.shiro; import com.alibaba.fastjson.JSONObject; import org ...

  8. 前端笔记（关于webpack打包时内存溢出问题的解决）

    首先安装increase-memory-limit cnpm install -g increase-memory-limit 重启cmd,并在项目跟目录中运行一下 increase-memory-l ...

  9. Nginx配置upstream实现负载均衡1

    如果Nginx没有仅仅只能代理一台服务器的话,那它也不可能像今天这么火,Nginx可以配置代理多台服务器,当一台服务器宕机之后,仍能保持系统可用.具体配置过程如下: 1. 在http节点下,添加ups ...

  10. HDU 5969 最大的位或【贪心】

    题目 B君和G君聊天的时候想到了如下的问题. 给定自然数l和r ,选取2个整数x,y满足l <= x <= y <= r ,使得x|y最大. 其中|表示按位或,即C. C++. Ja ...