webpack- html-webpack-plugin

時間 2019-12-13

標籤 webpack html plugin 欄目 HTML 简体版

原文原文鏈接

若是你的是用vue-cli生成你的vue項目，意味着生成的項目的默認webpack配置幾乎不須要作什麼修改，你經過npm run build就能獲得能夠用於發佈的/dist文件夾，裏面包含着一個index.html文件和build出來的output文件。若是打開/dist/index.html文件，大概你看到的是相似於這樣：javascript

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Output Management</title>
</head>
<body>
<script type="text/javascript" src="index.65580a3a0e9208990d3e.js"></script>
<script type="text/javascript" src="main.3d6f45583498a05ab478.js"></script>
</body>
</html>

這裏值得注意的一點是，文件裏面的index.65580a3a0e9208990d3e.js和main.3d6f45583498a05ab478.js，在每次執行npm run build以後這兩個文件的文件名裏面的hash值是可能變化的，而咱們不可能每次都手動去修改這個index.html文件所引用的文件的名字吧？所幸，有這麼一個plugin能幫咱們作這件事，他就是：html-webpack-plugin。
簡單地來講咱們須要html-webpack-plugin能作2件事：html

生成用於發佈的index.html文件
自動替換每次build出來的output文件

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

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

二：配置webpack.config.jsjava

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({
        })
    ]
}

執行webpack

npm run build

獲得：

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="index.65580a3a0e9208990d3e.js"></script>
<script type="text/javascript" src="main.3d6f45583498a05ab478.js"></script>
</body>
</html>

在咱們的webpack.config.js文件裏，咱們只是new HtmlWebpackPlugin({}），沒有給HtmlWebpackPlugin任何參數。能夠看到HtmlWebpackPlugin作了2件事：github

1： HtmlWebpackPlugin會默認生成index.html文件, 放到咱們的dist/目錄下面
2：dist/index.html會自動更新咱們每次build出來的文件
在進行更多的探討以前，咱們有必要來先看看現目前項目的結構：web

能夠看到截止到目前咱們的項目裏面是沒有任何html源文件的。vue-cli

三：添加源文件index.html
上一步呢咱們只是new了一個沒有任何參數的HtmlWebpackPlugin。其實HtmlWebpackPlugin有不少參數能夠使用，下面咱們介紹比較經常使用的幾個。npm

1：咱們先在項目的根目錄下添加一個index.html源文件，裏面的內容是：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>index.html source file</title>
</head>
<body>
</body>
</html>

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

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'
        })
    ]
}

執行

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文件實際上是以這裏的index.html爲源文件的，這一點能夠從dist/html/example.html和index.html的<title>同樣看出來。
關於html-webpack-plugin更多的配置能夠參考它的github：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。