欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack打包html中img,打包资源成功,图片引用错误,不能显示问题

程序员文章站 2022-05-25 21:18:04
...

//webpack 配置文件

 {
                test: /\.html$/,
             //处理html文件中img图片,负责引入img,被url-loaer处理,下载npm i html-withimg-loader -D
                loader: "html-withimg-loader"
            }
const { resolve } = require('path')
const HtmlWebpcakPliugin = require('html-webpack-plugin')
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    // loader配置
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                // 下载url-loader file-loader
                //只使用1个loader直接写
                loader: 'url-loader',
                options: {
                    // 图片小于8kb会被base64处理
                    limit: 8 * 1024,
                    // 问题因为yrl-loader默认使用es6模块化解析,而html-loader引入图片是commonjs
                    //解析出错[object module]
                    //解决,关闭url-loader的es6模块化,使用commonjs解析
                    esModule: false,
                    //文件重命名,hash:10取图片前10位,ext源文件扩展名
                    name: '[hash:10].[ext]',
                }
            },
            {
                test: /\.html$/,
             //处理html文件中img图片,负责引入img,被url-loaer处理,下载npm i html-withimg-loader -D
                loader: "html-withimg-loader"
            }
        ]
    },
    plugins: [
        // npm i html-webpack-plugin -D
        // 默认创建空html,自动引入打包输出所有资源(js/css)
        //创建有结构的html文件
        new HtmlWebpcakPliugin({
            //复制'./src/index.html'文件,自动引入打包输出所有资源(js/css)
            template: './src/index.html'
        })
    ],
    mode: 'development',