webpack(三)-----打包html_webpack3 html-webpack-custom-position-优快云博客

本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/110040133

本文介绍了如何使用html-webpack-plugin插件在webpack配置中解析HTML，创建带结构的Html文件，并自动引入打包资源。详细步骤包括全局和本地安装相关包，以及配置webpack入口、输出和插件部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、定义一个包

总结

npm init

2、下两个包

总结

1.通过终端全局安包 npm i webpack webpack-cli -g
2.通过终端本地安包 npm i webpack webpack-cli -D 开发依赖

3、下载html-webpack-plugin

总结

html-webpack-plugin默认会创建一个空的Html文件，自动引入打包输出的所有资源(js/css)

通过npm i html-webpack-plugin -D
webpack5 ： npm i html-webpack-plugin@next -D

webpack.config.js配置

//引入地址拼接
const { resolve } = require('path')

//解析html的插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //入口
    entry: './src/index.js',
    //输出
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    //模块
    module: {
        rules: [
            {
                //匹配规则
                test: /\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
                //详细的loader
            }

        ]
    },
    //插件
    plugins: [
        // 功能:html-webpack-plugin默认会创建一个空的Html文件，自动引入打包输出的所有资源(js/css)
        // 需求:需要有结构的Html
        new HtmlWebpackPlugin({
            //复制src/index.js文件，并自动引入打包输出的所有资源(js/css)
            template: './src/index.html'
        })
    ],
    mode: 'development'
}