Vue2.0开发:html-webpack-plugin插件(05)
一 概述
- html-webpack-plugin插件介绍
- html-webpack-plugin插件安装与配置
- html-webpack-plugin插件的特性
二 html-webpack-plugin插件介绍
- webpack中的HTML插件(类似于一个模板引擎插件)
- 可以通过此插件自定制Index.html页面的内容
三 html-webpack-plugin插件安装与配置
3.1 html-webpack-plugin插件安装
通过如下的命令,即可在项目中安装此插件
npm install html-webpack-plugin -D
安装完成后package.json->devDependencies下可以看到html-webpack-plugin依赖
"devDependencies": {
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
3.2 html-webpack-plugin插件配置
1-导入HTML插件,得到一个构造函数
const HtmlPlugin =require('html-webpack-plugin')
2-指定源文件和生成文件的存放路径
const htmlPlugin = new HtmlPlugin({
template:'./src/index.html', //指定源文件的存放路径
filename: './index.html', //指定生成文件的存放路径
})
3-通过plugins节点,使htmlPlugin插件生效
module.exports = {
entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
output: {
path: path.join(__dirname, './dist'), //输出文件的存放路径
filename: 'bundle.js',//输出文件的名称
},
mode: 'development', //mode 用来指定构建模式。可选值有 development 和 production
devServer:{
open:true,
host:'localhost',
port:8080,
static: {
directory: path.join(__dirname, './')
},
},
plugins:[htmlPlugin], //通过plugins节点,使htmlPlugin插件生效
}
3.3 使用html-webpack-plugin前后对比
使用前 | 使用后 |
---|---|
说明:
- 使用前,未配置html源和目的路径,打开后是根目录
- 使用后,配置了html源和目的路径,可以预览效果图
四 html-webpack-plugin插件的特性
4.1 index源码和html-webpack-plugin生成对比
index源码 | html-webpack-plugin生成 |
---|---|
4.2 解惑hmtl-webpack-plugin
- 通过HTML插件复制到项目根目录中的Index.html页面,也被放到内存中
- HTML插件在生成的index页面,自动注入了打包的bundle.js文件
五 参考
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfecjgj
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13