第四十九篇:webpack的基本使用(三) --安装和配置html-webpack-plugin插件
2024-09-07 23:05:42
好家伙,
1.html-webpack-plugin的作用
讲一下为什么需要这个插件
存在问题:在点开locahost:8080之后出现的是项目的根目录,而不是网页
这时候需要再点开scr文件夹才能看见index首页
所以我们想要一进8080就能够看到index首页,
解决方法:我们可以把index放到根目录中,
但是这与"规范"冲突了,
("规范":程序员写的代码必须放在src文件夹)
所以如果我们的能够将index复制一份,再搬运到根目录下
就可以一进8080就能够看到index首页,
这也就是html-webpack-plugin插件的作用
2.安装html-webpack-plugin插件
终端跑一下:
npm install html-webpack-plugin@5.3.2 -D
3.配置html-webpack-plugin
在webpack.config.js中进行配置:
// 1.导入 HTML 插件,得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin') // 2.创建 HTML 插件的实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html',// 指定原文件的存放路径
filename:'./index.html',// 指定生成的文件的存放路径
}) module.exports={ mode: 'development', plugins: [htmlPlugin],// 3. 通过 plugins 节点,使 htmlPlugin 插件生效,webpack在运行时,会加载并调用这些插件
}
配置完后重新npm run dev
进入locahost:8080就可以直接看见index首页了
补充:html-webpack-plugin插件会把复制件放到内存中,所以是在根目录中看不见的.
That's all
最新文章
- Python下使用help(dict),显示'more'不是内部或外部命令,也不是可运行的程序或批处理文件,该如何处理?
- SSH框架搭建
- hdu 4784 Dinner Coming Soon(spfa + 优先队列)
- 【linux】umask
- 【c++内存分布系列】虚基类表
- 我爱工程化 之 gulp 使用(一)
- ♫【Git】
- IndexReader已解决的问题
- chrome开发工具指南(十四)
- Word技巧设置
- OAuth 2.0详解
- μC/OS-II 任务堆栈的初始化
- Centos--vsftp的配置
- ab,qps 并发连接数
- sql server2012 远程访问设置(转)
- Anaconda安装及配合pycharm使用
- Android调用系统软键盘
- Awk 从入门到放弃(2)– 分隔符 学习笔记
- Spark实践 -- 性能优化基础
- 全解析jQuery插件开发!很好很强大!
热门文章
- 什么是工业仿真?工业3D仿真有什么样的市场价值?
- 用Typescript 的方式封装Vue3的表单绑定,支持防抖等功能。
- Vue之封装二次axios
- Spring框架系列(5) - 深入浅出SpringMVC请求流程和案例
- python采集A站m3u8视频格式视频
- BigDecimal加减乘除及setScale的用法小结
- Java已知图片路径下载图片到本地
- windows server2012R2 上 .net core IIS 部署--应用程序池 自动停止
- Python 用configparser读写ini文件
- 抓到Dubbo异步调用的小BUG,再送你一个贡献开源代码的机会