《webpack5 实战三》之html打包

前言：项目一直在用webpack 打包，也系统的跟着B站的视频教程去学过，但是总是觉得差了点什么，有些配置还是不知道，决定把一些例子写下来总结下知识点，顺便学习下webpack5。webpack实战系列专栏webpack实战源码webpack官网文档目标和过程分解目标：将打包的js资源自动引用到html 文件使用html-webpack-plugin 插件做该功能步骤：webpack.

星宇大前端

611人浏览 · 2021-04-09 17:43:47

星宇大前端 · 2021-04-09 17:43:47 发布

前言：项目一直在用webpack 打包，也系统的跟着B站的视频教程去学过，但是总是觉得差了点什么，有些配置还是不知道，决定把一些例子写下来总结下知识点，顺便学习下webpack5。

webpack实战系列专栏

webpack实战源码

webpack官网文档

目标和过程分解

目标：将打包的js资源自动引用到html 文件

使用html-webpack-plugin 插件做该功能

步骤：

webpack.config.js 配置插件
下载 html-webpack-plugin 插件
验证打包结果

代码实现

webpack 配置问题

const { resolve } = require('path')
const HtmlwebpackPligin = require('html-webpack-plugin')
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'app.js',
        path:resolve(__dirname,'dist')
    },
    plugins:[
        //默认什么不写的时候，会自动创建index.html，引入打包完成的资源
        //同时支持title/template/templateContent 等参数
        new HtmlwebpackPligin({})
    ],
    mode:'development'
}

然后安装html-webpack-plugin插件

验证结果

什么都不指定的情况下，自动创建了.html和引入了打包的资源文件

在这里插入图片描述

当然可以设置配置html 内容等参数，比如设置：

//默认什么不写的时候，会自动创建index.html，引入打包完成的资源
        //同时支持title/template/templateContent 等参数
        new HtmlwebpackPligin({
            title:'html-demo',
            templateContent: `
            <html>
              <body>
                <h1>Hello World</h1>
              </body>
            </html>
          `
        })