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。