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 ...
随机推荐
- Extjs GridField 总结
此代码为完整代码,其中包含定位.使用 Enter 键,来实现 Tab 键. Ext.define('xxx.recordBook.view.EditGrid', { extend: 'Ext.form ...
- json数据的key的读取和替换
读取json的key: /** * @Description: 递归读取所有的key * @Param: * @return: * @throws Exception * @author: hw * ...
- NGINX---一次阿里云宝塔开发flask经历
1.放行端口问题 不但需要在阿里云官网服务器控制台放行端口,还需要在宝塔里面放行端口 2.nginx 宝塔默认的用户是www 句法: user user [group]; 默认: 用户无人; 语境: ...
- (8)Spring Boot 与数据访问
文章目录 简介 整合基本的JDBC与数据源 整合 druid 数据源 整合 mybatis 简介 对于数据访问层,无论是 SQL 还是 NOSQL ,Spring Boot 默认都采用整合 Sprin ...
- Redis--zset类型操作命令
有序集合类型 zset (sorted set ) redis 有序集合zset和集合set一样也是string类型元素的集合,且不允许重复的成员. 不同的是 zset 的每个元素都会关联一个分数(分 ...
- golang开发:环境篇(四)包管理器 glide的使用
glide 是golang项目开发中是特别重要的软件,没有它,golang的项目可能都无法发布. 为什么要使用glide 平时我们开发Go项目的时候,使用第三方的包的时候都直接使用go get 去获取 ...
- hadoop 伪分布启动-fs格式化
1.独立模式(standalone|local) nothing! 本地文件系统. 不需要启用单独进程. 2.pesudo(伪分布模式) 等同于完全分布式,只有一个节点. SSH: //(Socket ...
- PB笔记之数据窗口添加虚拟列的方法
1.选择计算域控件: 2.输入公式 3.添加一个输入框作为列名,注意Name必须改为后缀为_t(PB固定识别_t)才可以绑定输入框和计算域作为虚拟列,虚拟列在最后一列时,有可能不能改变宽度,需往前挪才 ...
- X64驱动:内核操作进线程/模块
注意:下面的所有案例必须使用.C结尾的文件,且必须在链接选项中加入 /INTEGRITYCHECK 选项,否则编译根本无法通过(整合修正,Win10可编译,须在测试模式下进行),内核代码相对固定,如果 ...
- java 禁用科学计数法
禁用科学计数法 Double num = 80000000000.000001; System.out.println("默认计数法:num=" + num); NumberFor ...