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. C++ STL-bitset

    1.bitset的声明 #include <bitset> using std::bitset; 2.bitset对象的定义和初始化       可以如下声明一个该类型变量: bitset ...

  2. rtsp向rtmp推流

    package com.awifi.video.media.test; import org.bytedeco.javacpp.avcodec; import org.bytedeco.javacv. ...

  3. linux的fcntl函数

    fcntl可实现对指定文件描述符的各种操作,例如获取/设置 文件的是否可以被读写的状态,等其他状态. int fcntl (int __fd, int __cmd, ...);The remainin ...

  4. 小贴士--java篇

    1. java:  “.”和“|”都是转义字符,必须得加"\\" 2.java :如果在一个字符串中有多个分隔符,可以用“|”作为连字符,比如:“acount=? and uu = ...

  5. Linux 服务器修改时间与时间同步

    设置时间 date --set '2015-11-23 0:10:40' # 方法一,通用 timedatectl set-time '2015-11-23 08:10:40' # 容器内可能不支持 ...

  6. IDEA使用技巧--将本地项目和git远程项目关联

    之前开发没有从头儿搭建过新项目,都是从IDEA配置下项目的git地址,pull代码之后进行开发,提交.这次需要将本地新建的项目push到在git上同样是新建的空项目上去(git上的项目只有工程名和re ...

  7. git版本控制系统重新认识

    git 版本控制系统 目标:完全搞懂git分布式版本控制系统 搭建git版本控制系统 cvs集中化版本控制系统--集中式管理的服务器 git分布式版本控制系统--会将原始代码仓库镜像下来 新项目使用g ...

  8. windows下搭建nginx负载均衡

    学习笔记,第一次记录避免忘记 首先介绍一下本地环境是windows2008 R2-64位. 1.  到nginx官网上下载最新稳定版的安装包,http://nginx.org/en/download. ...

  9. 前端开发 Vue -4promise解读2

    https://www.runoob.com/vue2/vue-tutorial.html promise promise是什么?   1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执 ...

  10. 解决Maven 编译出的jar中没有主清单属性

    出现这个问题的原因是 pom 中没有添加主程序入口 在配置中添加如下配置 <plugin> <groupId>org.apache.maven.plugins</grou ...