Webpack html资源打包

Posted 2021-04-04 MIEX在线

webpack要是想要处理html一起打包，就需要借助一些其他的插件，这个插件就是html-webpack-plugin。

如何使用webpack来打包html资源呢？

首先当然是下载插件了。

npm install html-webpack-plugin -D

下载插件之后就是要开始编写配置文件了：

const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports={
 entry:"./src/index.js", output:{ path:resolve(__dirname,"build"), filename:'built.js', },module:{ rules:[] }, plugins:[], mode:"development"}

配置文件的框架大致是如上，那么我们处理css，less等文件是通过module来处理的。我们的html呢？html其实是通过plugins来处理的，所以这次我们要学习如果编写plugins的内容。

plugins里面的内容基本都是实例化的对象，我们导入HtmlWebpackPlugin之后就可以直接实例化：

    

plugins:[new HtmlWebpackPlugin();],

这样就可以了。但是这样的话你会发现你的html每次都是生成的模板，然后插入了js等文件，如果你想用你自己写好的html呢？

直接使用template传参就可以了：

 

plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html' }); ],

这个样子，你就可以使用你的html来打包你的项目了。但是这个地方要注意一下，打包前的html绝对不要引入资源哟，因为在打包的时候，webpack会帮你引入资源，如果自行引入的话，会出现错误~

如果你想加入IT工作就业面试群，快来联系我们~~

About us

米爱教育

www.miexedu.com | www.miextech.com

米爱教育专注于留学生就业及作业辅导平台。

为留学生提供作业，就业，技能以及证书辅导培训。

证书课程

拥有证书和一定经验的毕业生，将会在同毕业生群体中极大可能的获得就业机会。

开设微软、Oracle、AWS等IT类证书辅导课程，帮助留学生提升技能，增加就业面试机会。

证书课程可以为IT专业的学员提供行业入门的敲门砖，使IT行业中的从业人士的职业技能获得权威的认证。

就业实习课程

开设就业班及实习班。就业班提供从零基础到就业水平的技能培训。实习班提供在企业中实际开发经验及指导。

帮助留学生快速积累经验，突破门槛，以应对严峻的就业环境。

作业辅导

顶尖企业专业导师，帮助留学生轻松拿到好成绩。