html-webpack-plugin的作用:

1.在内存中根据我们的index模板页面,生成一个内存里面的首页

2.当使用html-webpack-plugin之后,我们不再需要手动处理bundle.js的引用路径了,

因为这个插件,已经帮我们自动创建了一个合适的script,并且,引用了正确的路径

简要概述两个作用:

1.自动在内存中根据指定页面生成一个内存的页面

2.自动把打包好的bundle.js追加到页面中去

运行 cnpm i html-webpack-plugin -D 安装到开发依赖

//第1步
// 导入内存中生成HTML页面的插件
// 只有是插件,都一定要放到Plugins节点中去
const htmlWebpackPlugin=require('html-webpack-plugin')
//第2步
new htmlWebpackPlugin({//创建一个在内存中 生成HTML页面的插件
template:path.join(__dirname,'/src/index.html'),//指定 模板页面,将来会根据指定的页面路径,去生成内存中的页面
filename:'index.html' //指定生成的页面的名称
})

7 html-webpack-plugin的两个基本作用的更多相关文章

  1. 如何开发webpack plugin

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

  2. 简单webpack plugin 开发

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

  3. 揭秘webpack plugin

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

  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的安装 以及 问题 以及 作用

    参考链接: https://blog.csdn.net/Rnger/article/details/81086938     https://blog.csdn.net/qq_38111015/art ...

  8. Vue系列之 => html-webpack-plugin的两个基本作用

    安装 npm i html-webpack-plugin -D webpack.config.js const path = require('path'); //启用热更新的第二步,导入webpac ...

  9. C语言中两个!!的作用

    两个!是为了把非0值转换成1,而0值还是0. 因为C语言中,所有非0值都表示真. 所以!非0值 = 0,而!0 = 1.所以!!非0值 = 1,而!!0 = 0.例如:i=123 !i=0 !!i=1 ...

随机推荐

  1. gluster设置日志级别

    glusterd --log-level WARNING #将日志级别设定为warning gluster --log-level=ERROR volume status #查看日志级别的状态 glu ...

  2. ROS中的通信机制

    http://www.ros.org/core-components/ Communications Infrastructure At the lowest level, ROS offers a ...

  3. LeetCode 792. 匹配子序列的单词数(Number of Matching Subsequences)

    792. 匹配子序列的单词数 792. Number of Matching Subsequences 相似题目 392. 判断子序列

  4. Ribbon源

    在Riibon中一个非常重要的组件为LoadBalancerClient,它作为负载均衡的一个客户端 ServiceInstance choose(String serviceId); 从负载均衡器中 ...

  5. MyBatis逆向工程生成配置 generator (生成pojo、mapper.xml、mapper.java)

    MyBatis逆向工程生成 mybatis需要程序员自己编写sql语句,mybatis官方提供逆向工程,可以针对单表自动生成mybatis执行所需要的代码(mapper.java.mapper.xml ...

  6. CodeForces-166B-Polygons

    B. Polygons time limit per test:2 seconds memory limit per test:256 megabytes input:standard input o ...

  7. vue利用keep-alive/beforeRouteLeave前进刷新后退不刷新(缓存)

      keep-alive缓存 在vue中默认router-link进入页面组件都是不缓存的.对于数据不会更新的页面.可以使用keep-alive来缓存以提高性能. 在项目src/router/inde ...

  8. vim常用命令的使用

    中文博客:https://www.cnblogs.com/lijia0511/p/5644566.html 英文原文:http://yannesposito.com/Scratch/en/blog/L ...

  9. Oracle部分

    做了很多年Oracle,转行到MySQL了,算是借鉴 Oracle日常维护管理指标 一. 基本硬件环境 1. 主机硬件环境 品牌 型号 数量 物理CPU核数及逻辑CPU数 内存大小 本地硬盘大小 光驱 ...

  10. JAVA堆,栈的区别,用AarrayList、LinkedList自定义栈

    大家都知道java模拟机在运行时要开辟空间所以它有特定的五个内存划分: 1.寄存器:    2.本地方法区:    3.方法区:    4.栈内存:    5.堆内存: 但是我们今天来注重讲一下栈和堆 ...