webpack基础四：html的自动引入打包输出的模块：html-webpack-plugin的使用

一.安装

npm install html-webpack-plugin -D

二.配置

const path = require("path");
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: 'inline-source-map', // 快速找到代码报错的文件和行数（帮助我们bug定位）
    mode: 'development', // develpment | production ，生产模式下代码会进行压缩
    entry: './src/index.js', // 入口文件
    output: {
        publicPath: './', // 打包后每个模块的公共路径头
        filename: 'bundle.js', // 输出的核心js的文件名
        clean: true // 是否清空打上一次打包的数据
    },
    module: {
        rules: [
            {
                // 需要根据对应的loader名字进行安装
                // npm install xxx-loader -D
                // 根据正则匹配所有css文件，对齐进行修改
                test: /\.css$/,
                // 数组是从尾往头执行
                use: [
                    // 创建style标签，将js中的样式文件加载到style中，再放入head标签中
                    'style-loader',
                    // 将css文件编程commJs模块，加载到js中，以样式表的字符串形式存在
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    'css-loader',
                    // 将less文件编程css文件
                    // 需要安装 > npm install --save-dev less-loader less
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, "./src/index.html")
        })
    ],
    devServer: {
        hot: true,
        port: 8080,
        static: path.resolve(__dirname, "./dist")     // contentBase 修改成 static
    }
}

三.html-webpack-plugin解释

• 在plugins数组中new一个htmlWebpackPlugin对象，就代表使用了该插件
• 会自动创建一个空白的html文件，然后将webpack打包输出的文件自动引入到其中
• 但是一般都是指定一个模板，所以我们添加了配置来指定我们的模板（更多配置详见webpack文档）