前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >《webpack5 实战三》之html打包

《webpack5 实战三》之html打包

作者头像
星宇大前端
发布2021-04-13 16:18:37
5540
发布2021-04-13 16:18:37
举报
文章被收录于专栏:大宇笔记

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

目标和过程分解


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

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

步骤:

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

代码实现


webpack 配置问题

代码语言:javascript
复制
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 内容等参数,比如设置:

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

效果如下:

在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021/04/09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 目标和过程分解
  • 代码实现
    • webpack 配置问题
      • 验证结果
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档