时间:2021-05-08
最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的两个主要作用:
为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题
可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口
1、安装
cnpm i webpack-plugin -D2、在webpack.config.json中引用
const path = require('path')const htmlWebpackPlugin = require('html-webpack-plugin') //第一步module.exports = { entry: path.join(__dirname, './src/main.js'), output: { path: path.join(__dirname, './dist'), filename: 'bundle.js', }, mode: 'development', devServer: { open: true, port: 8080, hot: true, contentBase: 'src' }, plugins: [ new htmlWebpackPlugin({ //第二步 template: path.join(__dirname, './src/index.html'), //指定生成模板的路径 filename: 'index.html' //指定生成页面的名称 }) ]}3、html-webpack-plugin的作用
一、在内存中生成一个指定模板的文件,在访问时速度更快
二、自动为指定模板文件添加bundle.js文件
总结
到此这篇关于详解html-webpack-plugin使用的文章就介绍到这了,更多相关html-webpack-plugin使用内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了webpack插件html-webpack-plugin的具体使用,分享给大家,具体如下:插件地址:https://pilation.plugin('
html-webpack-plugin插件是用于编译Webpack项目中的html类型的文件,如果直接将html文件置于./src目录中,用Webpack打包时
html-webpack-plugin可能用过的webpack的童鞋都用过这个plugin,就算没用过可能也听过。我们在学习webpack的时候,可能经常会看到
首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件。执行如下命令npminstallh
使用html-webpack-plugin插件来启动页面可将html页面放入内存以提升页面的加载速度并且还能自动设置index.html页面中JS文件引入的路径