<!-- 15  html-webpack-plugin的2个作用
下载 cnpm i html-webpack-plugin -D 作用在==>内存中生成页面 在webpack中 导入在内存中生成的HTML页面的插件
// 只要是webpack的插件 都要放入 plugins 这个数组中去
const htmlwebpackPlugin=require("html-webpack-plugin") plugins: [
new webpack.HotModuleReplacementPlugin(), //这是热跟新的配置 new htmlwebpackPlugin({ //创建一个 在内存中生成 HTML页面的插件
template:path.join(__dirname,'./src/index.html'), //指定模板页面,将来会根据指定的页面路径,去生成内存中的 页面
filename:"index.html" //指定生成的页面名称
})
] // 当我们使用html-webpack-plugin之后,我们不需要手动处理bundle.js的引用路径,
(我们可以将index.html中的 <script src="../dist/bundle.js"></script>注释掉 )
因为这个插件,已经帮我们自动创建一个 合适的script,, 并且引用了正确的路径 这个插件有两个作用的
在内存中帮我们生成一个页面
帮我们自动创建一个合适的script标签 并且引入正确的路径

06webpack-- html-webpack-plugin的2个作用的更多相关文章

  1. 如何开发webpack plugin

    继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...

  2. 揭秘webpack plugin

    前言 Plugin(插件) 是 webpack 生态的的一个关键部分.它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程.这篇文章将尝试探索 webpack plu ...

  3. 简单webpack plugin 开发

    重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...

  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 bundle中parentJsonpFunction的作用

    parentJsonpFunction作用:使异步加载的模块在多个不同的bundle内同步. 假设有多入口文件 bundle1.js: bundl2.js: 在webpack打包后 加载流程: 1.b ...

  8. 上手 Webpack ? 这篇就够了!

    JavaSript 模块化打包已混迹江湖许久.2009年,RequireJS 就提交了它的第一个版本,Browserify 接踵而至,随后其他打包工具也开始大行其道.最终,Webpack 从其中脱颖而 ...

  9. 翻译 | 上手 Webpack ? 这篇就够了!

    译者:小 boy (沪江前端开发工程师) 本文原创,转载请注明作者及出处. 原文地址:https://www.smashingmagazine.com/2017/02/a-detailed-intro ...

  10. [转] webpack之plugin内部运行机制

    简介 webpack作为当前最为流行的模块打包工具,几乎所有的主流前端开发框架(React.Vue等)都会将其作为默认的模块加载和打包工具.通过简单的配置项,使用各种相关的loader和plugin, ...

随机推荐

  1. 【洛谷P2494】 [SDOI2011]保密(分数规划+最小割)

    洛谷 题意: 题意好绕好绕...不想写了. 思路: 首先类似于分数规划做法,二分答案得到到每个点的最小危险度. 然后就是在一个二分图中,两边撤掉最少的点(相应代价为上面算出的危险度)及相应边,使得中间 ...

  2. 动态添加Redis密码认证的方法

    1.定制jedis 对redis返回的错误的处理,做两处修改: 忽略 (error) ERR Client sent AUTH, but no password is set.使配置了密码的jedis ...

  3. python3.5.3rc1学习七:多线程

    import threading def exampleFun(): #打印当前激活的线程数量 print(threading.active_count) #查看上面激活的线程是哪几个 print(t ...

  4. lua 7 运算符

    转自:http://www.runoob.com/lua/lua-miscellaneous-operator.html Lua提供了以下几种运算符类型: 算术运算符 关系运算符 逻辑运算符 其他运算 ...

  5. git报错_you are not allowed to push code to protected branches on this project

    问题描述 今天在提交代码的时候,由于使用的是新库,写完代码后,进行push,发现报错 you are not allowed to push code to protected branches on ...

  6. <String> 179 ,6, 168

    179. Largest Number 冒泡排序,每一轮都把最小的数字选出放在最后. class Solution { public String largestNumber(int[] nums) ...

  7. linux jdk1.8 64位下载永久地址,ubuntu,centos,java

    https://pan.baidu.com/s/1A4cl3vUWCtiHxJ9eHK2ApQ  密码:j8dg

  8. python3 消耗CPU的性能,使CPU满载(可以设置进程名称)

    需要安装库:setproctitle    1.1.10,设置进程名称,测试操作系统centos 7.0 # -*- coding: utf-8 -*- from multiprocessing im ...

  9. 移动端&PC端CSS样式兼容代码

    CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-us ...

  10. Elasticsearch搜索调优权威指南 (2/3)

    本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/AAkVdzmkgdBisuQZldsnvg 英文原文:https://qbox.io/blog/el ...