在内存中生成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. Android学习笔记菜单资源文件

    创建菜单资源 menu_one.xml <?xml version="1.0" encoding="utf-8"?> <menu xmlns: ...

  2. 浅谈RegExp 对象的方法

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

  3. GetLastError返回值含义

    GetLastError的返回值的含义: (0)-操作成功完成. (1)-功能错误. (2)- 系统找不到指定的文件. (3)-系统找不到指定的路径. (4)-系统无法打开文件. (5)-拒绝访问. ...

  4. cb40a_c++_STL_算法_交换swap_ranges

    cb40a_c++_STL_算法_交换swap_rangesswap_ranges(b,e,b2);如果两个容器的数据数量不一致时,只交换一部分数据,a里面3个,b里面5个,则只会交换3个,b里面还有 ...

  5. SLAM:使用EVO测评ORBSLAM2

    SLAM:使用EVO测评ORBSLAM2 EVO是用来评估SLAM系统测量数据以及输出估计优劣的Python工具,详细说明请参照: https://github.com/MichaelGrupp/ev ...

  6. Andrew Ng - 深度学习工程师 - Part 1. 神经网络和深度学习（Week 3. 浅层神经网络）

     =================第3周 浅层神经网络=============== ===3..1  神经网络概览=== ===3.2  神经网络表示=== ===3.3  计算神经网络的输出== ...

  7. 13.DRF-版本

    Django rest framework源码分析(4)----版本 版本 新建一个工程Myproject和一个app名为api (1)api/models.py from django.db imp ...

  8. android屏幕适配的全攻略3-动态获取手机屏幕宽高及动态设置控件宽高

    1.获取手机屏幕宽高: DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetr ...

  9. ant design pro---ProTable关闭Table上的提示信息

    toolBarRender={false} tableAlertRender={false}

  10. CentOS 6.4 安装 rar软件（tar.gz 包）并注册成功

    1.下载地址: www.rarlab.com/download.htm 2.解压tar.gz文件(cd进入文件目录) # cd /home/wjshan0808/Documents # ls rarl ...