webpack学习---使用webpack打包html文件

使用webpack打包html文件 需要在plugin中配置,npm下载 html-webpack-plugin 插件,随后引入等操作

                /*
                loader: 1. 下载   2. 使用（配置loader）
                plugins: 1. 下载  2. 引入  3. 使用
                */
                const { resolve } = require('path');
                //引入插件
                const HtmlWebpackPlugin = require('html-webpack-plugin');

                module.exports = {
                entry: './src/index.js',
                output: {
                    filename: 'built.js',
                    path: resolve(__dirname, 'build')
                },
                module: {
                    rules: [
                    // loader的配置
                    ]
                },
                plugins: [
                    // plugins的配置
                    // html-webpack-plugin
                    // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
                    // 需求：需要有结构的HTML文件
                    new HtmlWebpackPlugin({
                    // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
                    template: './src/index.html'
                    })
                ],
                mode: 'development'
                };