webpack 打包html文件

webpack 打包html文件

webpack.config.js配置文件内容为：

/**
 * loader: 1. 下载 2. 使用（配置）
 * plugins：1. 下载 2. 引入 3.使用
 */

// 用来拼接绝对路径的方法
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // webpack 配置

    // 入口起点
    entry : './src/index.js',
    // 输出
    output : {
        // 输出文件名
        filename : 'built.js',
        // 输出路径
        path : resolve(__dirname, 'dist')
    },
    // loader 配置
    module : {
        rules : [
            // 详细 loader 配置

        ]
    },
    // plugins 的配置
    plugins : [
        // 详细 plugins 的配置
        // html-webpack-plugin
        // 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
        new HtmlWebpackPlugin({
            // 增加一个配置
            // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
            template : './src/index.html'
        })
    ],
    //模式
    mode : 'development', // 生产模式
    // mode : 'production' // 开发模式
}