浅析html webpack plugin插件的行使教程

行使html-webpack-plugin插件来启动页面 可将html页面放入内存 以晋升页面的加载速率
而且还能自动配置index.html页面中JS文件引入的路径

行使条件：项目中安装了Webpack行使步调：

步调一、在项目标根目次下输入cnpm i html-webpack-plugin -D 将html-webpack-plugin插件安装到开拓依靠
其浸染是按照指定的模板页面在内存中天生响应的HTML页面

步调二、插件安装之后 修改webpack.config.js的设置文件

在设置文件中导入html-webpack-plugin插件 并设置模板页路径和天生的页面名称即可

const path=require("path") // 导入html-webpack-plugin const htmlWebpackPlugin=require("html-webpack-plugin") module.exports={ entry:path.join(__dirname,"./src/main.js"), output:{ path:path.join(__dirname,"./dist"), filename:"bundle.js" }, // 设置插件节点 plugins:[ // 建设html-webpack-plugin插件 new htmlWebpackPlugin({ // 配置参数 template:path.join(__dirname,"./src/index.html"), // 指定模板页面 以按照指定页面天生内存中的页面 filename:"index.html" // 指定天生的内存中的页面的名称 }) ] }

行使了html-webpack-plugin插件之后 就无需手动处理赏罚bundle.js的引用路径了
由于 在天生后的内存中的HTML页面里 已经自动引入了bundle.js的正确路径

总结 - 插件的浸染：

1、自动按照指定的页面天生一个在内存中的页面

2、自动在页面中引入打包好的bundle.js

到此这篇关于浅析html webpack plugin插件的行使教程的文章就先容到这了,更多相干html webpack plugin插件内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!