webpack(三)-----打包html

HTMLWebpackPlugin：解析HTML与webpack配置实战

最新推荐文章于 2024-01-19 16:30:40 发布

原创最新推荐文章于 2024-01-19 16:30:40 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

webpack学习专栏收录该内容

9 篇文章

订阅专栏

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

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'
}