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 ...
随机推荐
- JVM(四) 垃圾回收
1. 堆内存结构 Java堆从GC的角度可以细分为:新生代(Eden区.From Survivor区和To Survivor区)和老年代. 1.1 新生代 新生代是用来存放新生的对象.一般占据堆的1/ ...
- LeetCode 104. 二叉树的最大深度(Maximum Depth of Binary Tree)
104. 二叉树的最大深度 104. Maximum Depth of Binary Tree 题目描述 给定一个二叉树,找出其最大深度. 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数. 说 ...
- 织梦/dedecms采集怎么去除a标签
dedecms采集去除a标签代码 DedeCMS采集规则-过滤-替换-技巧2009-01-14 15:491.采集去除链接[Copy to clipboard]CODE:{dede:trim}]*)& ...
- zblog安装环境介绍?zblog安装需要什么环境
最近在群里看到很的多人有在问:“安装zblog需要什么环境?”,其实这个问题在zblog官网的程序下载页面有说明,但是不太详细,那么本文的目的就是来给大家介绍下zblog安装环境详细说明. zblog ...
- Git Gui、Ssh key的使用和ideaui配置使用Git解决冲突(下)
目的: 1.Git Gui的使用 2.Ssh key 介绍及使用 2.1小结:https 和 SSH 的区别 3.Idea配置使用并使用git 4.ideaui使用Git冲突问题解决 Git Gui的 ...
- 撸一个 vue 的截图组件,按比例截取
<template> <div class="clip-img" :style="imgStyle"> <img :src=&qu ...
- vue cli3 项目优化
vue-cli3 Prefetch (官网内容) <link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空 ...
- Effective Java 读书笔记(一):创建和销毁对象
1 构造器 => 静态工厂方法 (1)优势 静态工厂方法有名字 静态工厂方法不必在每次被调用时都产生一个新的对象 静态工厂方法能返回原返回类型的任意子类型的对象 静态工厂方法根据调用时传入的不同 ...
- 关于Windows下的访问控制模型
在探索Windows操作系统的过程中,发现很多有意思 的东西. Windows下的访问控制模型也是我在Github上浏览代码时,无意中发现的. 项目地址 https://github.com/Krut ...
- 天然气水电行业专用抄表器PDA现场打印通知单
传统的抄表工作是使用卡片记录,抄表工人不仅需要背着厚厚的卡片进行记录,回到电力局还需要有专门人员进行电脑录入,浪费了大量人力物力,而且各个环节上出错率比较高.电力专用抄表器的广泛应用使得电力抄表工作变 ...