轉載請注明 來源: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)