7 html-webpack-plugin的两个基本作用
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的两个基本作用的更多相关文章
- 如何开发webpack plugin
继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...
- 简单webpack plugin 开发
重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...
- 揭秘webpack plugin
前言 Plugin(插件) 是 webpack 生态的的一个关键部分.它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程.这篇文章将尝试探索 webpack plu ...
- Webpack Plugin
[Webpack Plugin] Since Loaders only execute transforms on a per-file basis, plugins are most commonl ...
- 案例实战之如何写一个webpack plugin
案例实战之如何写一个webpack plugin 1.写一个生成打包文件目录的file.md文件 // 生成一个目录项目目录的文件夹 class FileListPlugin { constructo ...
- YYDS: Webpack Plugin开发
目录 导读 一.cdn常规使用 二.开发一个webpack plugin 三.cdn优化插件实现 1.创建一个具名 JavaScript 函数(使用ES6的class实现) 2.在它的原型上定义 ap ...
- webpack的安装 以及 问题 以及 作用
参考链接: https://blog.csdn.net/Rnger/article/details/81086938 https://blog.csdn.net/qq_38111015/art ...
- Vue系列之 => html-webpack-plugin的两个基本作用
安装 npm i html-webpack-plugin -D webpack.config.js const path = require('path'); //启用热更新的第二步,导入webpac ...
- C语言中两个!!的作用
两个!是为了把非0值转换成1,而0值还是0. 因为C语言中,所有非0值都表示真. 所以!非0值 = 0,而!0 = 1.所以!!非0值 = 1,而!!0 = 0.例如:i=123 !i=0 !!i=1 ...
随机推荐
- spring结合shiro的学习总结
pom文件加入 <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-c ...
- 【转载】jmeter非GUI执行脚本+动态线程+生成HTML报告
标明文章出处: https://blog.csdn.net/qq_38915739/article/details/83018465 本次记录是在工作中为了能更好的用jmeter进行压力测试,进行 ...
- [转帖]运维必读:Linux 的内存分页管理
运维必读:Linux 的内存分页管理 https://cloud.tencent.com/developer/article/1356431 内存是计算机的主存储器.内存为进程开辟出进程空间,让进程在 ...
- RabbitMQ基础命令rabbitmqctl
官网文档 https://www.rabbitmq.com/rabbitmqctl.8.html 一般操作命令后台管理页面都有的,部分没有(应用程序管理,和集群管理). 直接使用命令,必须配置环境变量 ...
- hdu 2476 题解
题目 题意 给出两个字符串 $ s1,s2 $,每次操作可以使一段连续的子串全变成一个字母,问最少多少次操作可以使 $ s1 $ 变为 $ s2 $. 例如 $ zzzzzfzzzzz $,长度为 $ ...
- pip install 遇到的问题
执行pip命令时遇到 Fatal error in launcher: Unable to create process using '"' 电脑同时安装了python-2.7.13跟p ...
- Appscan 的安装与使用
一.安装 1.右键安装文件,以管理员身份运行,如下图所示: 2.点击[确定] 3.点击[安装] 4.选择:我接受许可协议中单位全部条款,点击[下一步] 5.点击[安装]到该目录 6.如果需求扫描Web ...
- littleFS在RT1052移植笔记
环境:rt1052单片机+16G tf卡 为什么使用littleFS? NXP官方SDK支持! 先进的损耗平衡功能(wear leveling)可提供最长的快闪及内存寿命及最大的使用量.因为FALSH ...
- 组件上使用v-model
组件上使用v-model <input v-model="searchText"> 等价于 <input v-bind:value="searchTex ...
- sqlserver 统计每分钟内的数量
1.统计每分钟内 url 的访问数量 SELECT SUBSTRING(CONVERT(varchar(100), date, 20), 0,17) as dateTime,COUNT(url) as ...