在内存中生成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. 使用python求解向量值函数的雅各比(Jacobian)矩阵

    考虑一个向量值函数$R^m \rightarrow R^n$,即$\textbf{y} = f(\textbf{x})$,它的雅各比(Jacobian)矩阵定义如下. 下面记录下一段使用python求 ...

  2. Anaconda 安装tensorflow出现错误

    C:\ProgramData\Anaconda3\envs\python36tfgpu\lib\site-packages\tensorflow\python\framework\dtypes.py: ...

  3. 【uni-app】uni.request二次封装，更好的管理api接口和使用

    前言 之前写了一个Vue.js的axios二次封装(点击跳转),这次是uni-app,uni-app是基于vue.js框架的,我觉得是很好用的一个框架,而且一套代码编译那么多平台,非常节省成本,当然, ...

  4. new jup在新一代中存在

    1.灰度发布服务动态路由 动态配置路由规则,实现对调用流量的精确控制.可配置基于版本.IP.自定义标签等复杂的规则.2.服务鉴权示例2需求:服务 provider-demo 只允许来自 consume ...

  5. 信息收集-DNS

    首先更正一个小白很普遍的错误观点,www.baidu.com(严格上是www.baidu.com. 这个点是根的意思,所有的记录从这里开始)并不是一个真正意义上的域名,而是百度服务器的A记录,baid ...

  6. linux 在指定文件夹下查找指定字符

    grep -r '119090610015743205' /data/html/www/gap_bz_middleware/storage/apiLogs/

  7. valueOf()、toString()

    基本上,所有JS数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题. JavaScript 的 valueOf() 方法 valu ...

  8. Guava RateLimiter限流器使用示例

    Guava中的RateLimiter可以限制单进程中某个方法的速率,本文主要介绍如何使用,实现原理请参考文档:推荐:超详细的Guava RateLimiter限流原理解析和推荐:RateLimiter ...

  9. HNOI 2014 米特运输（图论）

    HNOI 2014 米特运输 题目大意 给一棵树,每个点有自己的权值,要求更改一些点的权值,使得整棵树满足两个条件: 同一个父亲的所有子节点权值相同 父节点的取值为所有子节点的和 答案输出最少要更改的 ...

  10. AT2272 [ARC066B] Xor Sum 题解

    题目连接:传送门 分析 这道题只看题目中给的样例是找不出规律的 所以我们可以打一下表 1, 2, 4, 5, 8, 10, 13, 14, 18 如果你还是没有看出什么规律的话,我们可以从OEIS上搜 ...