<!-- 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. C++ - 结构体构造函数使用总结

    关于结构体构造函数使用总结 三种结构体初始化方法 1.利用结构体自带的默认构造函数 2.利用带参数的构造函数 3.利用默认无参的构造函数 要点: 在建立结构体数组时,如果只写了带参数的构造函数将会出现 ...

  2. VLAN实验(5)三层交换

    1.选择1台S5700和3台pc机,并根据实验编址完成此拓扑图. 2.检查连通性 (1)因为mengyu-PC1和mengyu-PC2在一个地址段上,可以ping通 (2)因为mengyu-PC1和m ...

  3. [C11] 推荐系统(Recommender Systems)

    推荐系统(Recommender Systems) 问题阐述(Problem Formulation) 将 推荐系统 纳入这门课程来讲有以下两个原因: 第一.仅仅因为它是机器学习中的一个重要的应用.在 ...

  4. Python 可执行对象

    Python 可执行对象 eval/repr eval eval 可以执行字符串类型的表达式 (或 compile() 创建的代码对象(code object) ) 并返回执行结果 eval(expr ...

  5. Paper | U-Net: Convolutional Networks for Biomedical Image Segmentation

    目录 故事背景 U-Net 具体结构 损失 数据扩充 发表在2015 MICCAI.原本是一篇医学图像分割的论文,但由于U-Net杰出的网络设计,得到了8k+的引用. 摘要 There is larg ...

  6. 不支持中国移动的N79频段,红米K30是假5G手机么?影响有多大?

    原文:https://mparticle.uc.cn/article.html?uc_param_str=frdnsnpfvecpntnwprdssskt&btifl=100&app= ...

  7. Unity开发实战探讨-资源的加载释放最佳策略

    注:本文中用到的大部分术语和函数都是Unity中比较基本的概念,所以本文只是直接引用,不再详细解释各种概念的具体内容,若要深入了解,请查阅相关资料. Unity的资源陷阱 游戏资源的加载和释放导致的内 ...

  8. App_Code下类无法引用问题

    App_Code 下创建的.cs文件仅仅是“内容”不是代码.设置文件为“编译”就可正常引用.

  9. C++调用linux命令并获取返回值

    qt中封装了相关的方法, 但是因为我的命令中用到了管道命令, 出现了非预期结果, 所有改用了linux系统原生的方法. 下边是一个判断某进程是否存在的例子. 当前存在一个问题,当linux返回多行时, ...

  10. Python TK编程第一部分 Hello Again

    当你想写大一点的程序的时候,将你的代码封装到一个或者多个类里会是一个不错的办法.下面'hello world'这个例子来自Matt Conway的Tkinter Life Preserver. fro ...