Vue系列之 => html-webpack-plugin的兩個基本作用

安裝

npm i html-webpack-plugin -D

webpack.config.js

const path = require('path');
//啟用熱更新的第二步,導入webpack
const webpack = require('webpack');
//導入在內存中生成html頁面的插件,只要是插件，都要放到plugins節點中去
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: { //這是配置webpack-dev-server命令參數的第二種形式
        open: true, //自動打開瀏覽器
        port: 3100, //設置端口
        contentBase: 'src', //指定托管的根目錄
        hot: true //啟用熱更新的第一步
    },
    plugins: [ //配置插件的節點
        //啟用熱更新第三步
        new webpack.HotModuleReplacementPlugin(), //new一個熱更新的模塊對象
        new htmlWebpackPlugin({ //創建一個在內存中生成html頁面的插件
            template : path.join(__dirname,'./src/index.html'), //指定模板頁面，根據指定的路徑生成內存中的頁面
            filename : 'index.html' //指定內存中生成的頁面的名稱
        })
    ]
}

當使用html-webpack-plugin之后，我們不再需要用手動去處理bundle.js。