526互联

6-webpack20210701-6

发布时间 2023-08-21 00:27:49作者: 影乌

转载请注明 来源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack打包 html 资源

一、打包 html文件的核心配置

// webpack.config.js webpack的配置文件
// 路径： ./webpack.config.js

//……

const HtmlWebpackPlugin = require('html-webpack-plugin');

//……

    // plugins的配置
    plugins: [
        //详细的plugins配置
        //html-webpack-plugin
        //功能:默认公创建一个空的HTML, 自动引入打包输出的所有资源(JS/CSS)
        //需求:需要有结构的HTML文件
        new HtmlWebpackPlugin({
            //复制../src/index.html'文件,并自动引入打包输出的所有资源(JS/CS5)
            template: './src/index.html'
        })
    ],

//……

二、安装对应插件

# 安装 html-webpack-plugin 插件
> npm i html-webpack-plugin -D

三、运行

> webpack
  • 结论：

1、打包 html 文件需要使用html-webpack-plugin插件

2、html-webpack-plugin需要复制一个有结构的HTML文件，否则默认会创建一个空的HTML

3、html-webpack-plugin会自动在打包的html文件中引入打包输出的所有资源(JS/CSS)