06webpack-- html-webpack-plugin的2个作用
<!-- 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个作用的更多相关文章
- 如何开发webpack plugin
继上回介绍了如何开发webpack loader 之后.趁热打铁,来继续看下webpack另一个核心组成:plugin. 下面也和loader一样,让我们一起从基本的官方文档着手看起. loader和 ...
- 揭秘webpack plugin
前言 Plugin(插件) 是 webpack 生态的的一个关键部分.它为社区提供了一种强大的方法来扩展 webpack 和开发 webpack 的编译过程.这篇文章将尝试探索 webpack plu ...
- 简单webpack plugin 开发
重要是学习下怎么开发webpack plugin,同时记录下 插件模型 webpack 是一个插件,可以是javascript class ,或者具名 class 定义apply 方法 指定一个绑定到 ...
- 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 bundle中parentJsonpFunction的作用
parentJsonpFunction作用:使异步加载的模块在多个不同的bundle内同步. 假设有多入口文件 bundle1.js: bundl2.js: 在webpack打包后 加载流程: 1.b ...
- 上手 Webpack ? 这篇就够了!
JavaSript 模块化打包已混迹江湖许久.2009年,RequireJS 就提交了它的第一个版本,Browserify 接踵而至,随后其他打包工具也开始大行其道.最终,Webpack 从其中脱颖而 ...
- 翻译 | 上手 Webpack ? 这篇就够了!
译者:小 boy (沪江前端开发工程师) 本文原创,转载请注明作者及出处. 原文地址:https://www.smashingmagazine.com/2017/02/a-detailed-intro ...
- [转] webpack之plugin内部运行机制
简介 webpack作为当前最为流行的模块打包工具,几乎所有的主流前端开发框架(React.Vue等)都会将其作为默认的模块加载和打包工具.通过简单的配置项,使用各种相关的loader和plugin, ...
随机推荐
- 对CNN 的理解
CNN 的强大之处在于它的多层结构能自动学习特征,并且可以学习到多个层次的特征:较浅的卷积层感知域较小,学习到一些局部区域的特征. 较深的卷积层具有较大的感知域,能够学习到更加抽象一些的特征.这些抽象 ...
- Jike_Time-决策树
根节点 非叶子节点(决策点) 叶子节点(决策结果) 分支 熵代表混乱程度 信息增益 构造树的基本想法是随着树深度的增加.节点的熵迅速地降低.熵降低的速度越快越好,这样我们有望得到一颗高度最矮的决策树 ...
- @Component, @Service, @Controller, @Repository区别
@Component, @Service, @Controller, @Repository是spring注解,注解后可以被spring框架所扫描并注入到spring容器来进行管理 @Componen ...
- Project Euler Problem 675
ORZ foreverlasting聚聚,QQ上问了他好久才会了这题(所以我们又聊了好久的Gal) 我们先来尝试推导一下\(S\)的性质,我们利用狄利克雷卷积来推: \[2^\omega=I\ast| ...
- orchard 中文文档 中英对照版
ORCHARD CMS a free, open source, community-focused Content Management System built on the ASP.NET MV ...
- Emgucv 4 下载、安装、配置
1.下载.安装 过程可查看之前Emgucv 3的说明:https://www.cnblogs.com/doget/p/7776377.html 安装完成后,安装目录下会生成如下文件及文件夹: 2.配置 ...
- python-1-基础认识
前言 将近2020年,python2即将不再更新,但是我们现在的python3也能非常受欢迎的!回顾一下2/3的区别: 1.python2 源码不标准,混乱,重复代码太多, 2.python3 统一 ...
- jpa复杂查询groupby失败的原因以及替代方法-20190824
问题 1 jpa specification 复杂查询,拼接group by 时,分页会触发select count (*),导致指定select * from table group by 字段 ...
- 送书『构建Apache Kafka流数据应用』和『小灰的算法之旅』和『Java并发编程的艺术』
读书好处 1.可以使我们增长见识. 2.可提高我们的阅读能力和写作水平. 3.可以使我们变的有修养. 4.可以使我们找到好工作. 5.可以使我们在竞争激烈的社会立于不败之地. 6.最大的好处是可以让你 ...
- APP兼容性测试 (一) 机型选择概要
一.App兼容性问题有哪些 安装失败.启动失败.卸载失败,卸载不干净. 程序运行过程中闪退 部分控件显示不完整或者功能失效 屏幕显示异常 图片展示不全等 二.App兼容性测试的核心要点 测试软件是否能 ...