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. Flask 数据库连接

    Flask拥有丰富的扩展组件,数据库管理方面Flask-SQLAlchemy简化了数据库管理的操作.SQLAlchemy是一个很强大的关系型数据库框架,支持多种数据库后台.其不但提供了高层ORM,而且 ...

  2. 网页授权access_token,基础支持access_token,jsapi_ticket

    微信开发中网页授权access_token与基础支持的access_token异同 问题1:网页授权access_token与分享的jssdk中的access_token一样吗? 答:不一样.网页授权 ...

  3. go创建模块化项目

    比如我要创建一个xxx-system,里面可能有多个子模块,步骤如下: 1.mkdir xxx-system 2.cd xxx-system 3.在xxx-system目录下创建一系列的service ...

  4. IDEA设置方法注释生成模板

    1.在项目设置里面找到Editor-Live Templates(默认设置里没有这个),然后点击右边的+号,选择Template Group,创建模板组,我这里起名叫Silentdoer: 2.选中自 ...

  5. Android中使用LitePal操控SQLite数据库

    <第一行代码>读书手札 (一)什么是LitePal数据库 LitePal数据库是安卓的一个开源库,我们在以后的开发中,将会遇到许许多多的开源库,感谢开源社 区:因为开源社区的存在,一些我们 ...

  6. Python14之字符串(各种奇葩的内置方法)

    一.字符串的分片操作 其分片操作和列表和元组一样 str1 = 'keshengtao' str1[2:6] 'shen' str1[:] 'keshengtao' str1[:4] 'kesh' 二 ...

  7. C++_自引用指针this

    自引用指针this 例 3.1 this指针的引例 #include<iostream.h> class A{ public: A(int x1){ x=x1; } void disp() ...

  8. python学习-54 正则表达式2

    re模块 之分组 >>> import re >>> re.findall("ab|c","sdfab|csdf") ['a ...

  9. springboot基础、注解等

    SpringBoot 1.springboot概念 Spring Boot是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. ...

  10. flutter从入门到精通三

    flutter可以通过一套代码运行在多个平台上,包括移动,web,桌面,嵌入式,但是在 Web 平台的支持尚未达到 Beta 阶段,请不要用在生产环节,在阅读文档时候,推荐大家阅读https://fl ...