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. socket编程(二)

    TCP下粘包问题 两种情况下会发生粘包. 1.发送端需要等缓冲区满才发送出去,造成粘包(发送数据时间间隔很短,数据了很小,会合到一起,产生粘包) 发送方:AB #其实放在缓存里没发送 发送方:B #其 ...

  2. Linux 缺少 mime.types 文件 mailcap

    问题描述: 一个项目当中使用的是 ossfs 挂载的一个 oss,在系统上传附件时,比如图片或视频时, 它的头信息为,application/octet-stream,上传后直接为二进制文件,访问的话 ...

  3. svn查看登录过的账号密码

    直接下载:http://www.leapbeyond.com/ric/TSvnPD/

  4. Linux如何查看进程、杀死进程、启动进程

    1.查看进程:ps命令 下面的命令还没实践,仅仅供你参考:可以用man ps查看格式,只不过是一个小工具而已! ps a 显示现行终端机下的所有程序,包括其他用户的程序.    ps -A 显示所有程 ...

  5. art-template 弹出上传多图

    主内容 <script id="img-show-tpl" type="text/html"> <div> <div class= ...

  6. go创建模块化项目

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

  7. [转帖]上云测试,这些关键点你get 到没有

    上云测试,这些关键点你get 到没有 https://www.cnblogs.com/mypm/p/10852656.html?tdsourcetag=s_pcqq_aiomsg sticky 还有s ...

  8. [转帖]JVM—深入理解内存模型与垃圾收集机制

    JVM—深入理解内存模型与垃圾收集机制 https://juejin.im/post/5d68dc9ee51d4561ad6548f7 前言 Java是一种跨平台的语言,当初其设计初衷也是为了解决各个 ...

  9. python学习-41 装饰器 -- 高阶函数

    装饰器:本质就是函数.是为其他函数添加附加功能的. 原则:1.不修改被修饰函数的源代码2.不修改被修饰函数的调用方式 --- 装饰器的知识储备 装饰器=高阶函数+函数嵌套+闭包 高阶函数 1.高阶函数 ...

  10. WUSTOJ 1336: Lucky Boy(Java)博弈

    题目链接:1336: Lucky Boy 参考博客:LUCKY BOY 博弈--HandsomeHow Description Recently, Lur have a good luck. He i ...