摘要：三添加源文件上一步呢我們只是了一個沒有任何參數(shù)的?？梢耘渲米詈蟮奈募脑次募?。例如這里，我們使用根目錄下的，最后生成的文件其實(shí)是以這里的為源文件的，這一點(diǎn)可以從和的一樣看出來。關(guān)于更多的配置可以參考它的

如果你的是用vue-cli生成你的vue項(xiàng)目，意味著生成的項(xiàng)目的默認(rèn)webpack配置幾乎不需要做什么修改，你通過npm run build就能得到可以用于發(fā)布的/dist文件夾，里面包含著一個index.html文件和build出來的output文件。如果打開/dist/index.html文件，大概你看到的是類似于這樣：

這里值得注意的一點(diǎn)是，文件里面的index.65580a3a0e9208990d3e.js和main.3d6f45583498a05ab478.js，在每次執(zhí)行npm run build之后這兩個文件的文件名里面的hash值是可能變化的，而我們不可能每次都手動去修改這個index.html文件所引用的文件的名字吧？所幸，有這么一個plugin能幫我們做這件事，他就是：html-webpack-plugin。
簡單地來說我們需要html-webpack-plugin能做2件事：

生成用于發(fā)布的index.html文件

自動替換每次build出來的output文件

說了那么多也是廢話，直接看代碼來得直接：
一：安裝html-webpack-plugin

npm install --save-dev html-webpack-plugin

二：配置webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: {
        index: "./src/index.js",
        main: "./src/main.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[chunkhash].js",
    },
    plugins: [
        new HtmlWebpackPlugin({
        })
    ]
}

執(zhí)行

npm run build

得到：

打開dist/index.html文件看下：

在我們的webpack.config.js文件里，我們只是new HtmlWebpackPlugin({}），沒有給HtmlWebpackPlugin任何參數(shù)。可以看到HtmlWebpackPlugin做了2件事：

1： HtmlWebpackPlugin會默認(rèn)生成index.html文件, 放到我們的dist/目錄下面
2：dist/index.html會自動更新我們每次build出來的文件
在進(jìn)行更多的探討之前，我們有必要來先看看現(xiàn)目前項(xiàng)目的結(jié)構(gòu)：

可以看到截止到目前我們的項(xiàng)目里面是沒有任何html源文件的。

三：添加源文件index.html
上一步呢我們只是new了一個沒有任何參數(shù)的HtmlWebpackPlugin。其實(shí)HtmlWebpackPlugin有很多參數(shù)可以使用，下面我們介紹比較常用的幾個。

1：我們先在項(xiàng)目的根目錄下添加一個index.html源文件，里面的內(nèi)容是：

2: 修改webpack.config.js，給HtmlWebpackPlugin添加參數(shù)：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: {
        index: "./src/index.js",
        main: "./src/main.js"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[chunkhash].js",
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: "html/example.html",
            template: "index.html"
        })
    ]
}

執(zhí)行

npm run build

得到：

配置里面的：

new HtmlWebpackPlugin({
            filename: "html/example.html",
            template: "index.html"
        })

filename
filename可以配置最后生成的文件名字，甚至可以給一個帶父文件夾路徑的，比如這里的‘html/example.html’。
template
template可以配置最后的html文件的源文件。例如這里，我們使用根目錄下的index.html，最后生成的dist/html/example.html文件其實(shí)是以這里的index.html為源文件的，這一點(diǎn)可以從dist/html/example.html和index.html的