打包 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)

results matching ""

    No results matching ""