webpack打包图片资源，图片不显示和index.html，HtmlWebpackPlugin

安装相对应的版本号 防止报错

先看目录结构：创建个img文件夹存放图片

我们在style.css文件引入图片方便看运行效果

在程序打包主入口引入style.css

安装 file-loader 依赖
提示最新版的webpack已经内置了不需要在安装
下面配置规则需注意 已经在下文代码区分
例如版本"webpack": "^5.74.0",

npm install --save-dev file-loader@4.0.0

在webpack.config.js进行配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',//production development开发环境不压缩dist 
    entry: './src/main.js', 
    output: {
        path: path.join(__dirname, './dist/'),
        filename: 'bundle.js'
    },

    module: { // 模块      
        rules: [ // 规则   
            {
                test: /\.css$/i, // 正则表达式，匹配 .css 文件资源        
                use: [  // 使用的 Loader ,注意顺序不能错           
                    'style-loader',//js识别css
                    'css-loader'//将css转换为js
                ]
            },
            //这里是配置打包图片的
            {
                test: /\.(png|svg|jpg|gif)$/i,
                use: [
                    'file-loader'
                ]
            }
          // 最新版的webpack使用方式(webpack内置)
           {
            test: /\.(png|svg|jpg|gif)$/i,
            type:'asset/resource'
            }
        ]
    }
}

打包编译：

bpm  run  build

dist下生成一个打包后的图片

报错问题：

**访问根目录下的 index.html, 背景图并未显示出来
控制台显示的是 background-image: url(974db94e3c226840f3cededb0dc51e66.png
因为我们书写代码的时候在style.css文件引入的 图片的路径是../img/1645773893.png
但是我们打包后会在dist文件下生成随即名的图片 这个才是浏览器最终使用的
因为路径不对访问不到
所以我们需要把index.html放在dist目录下**

解决：
使用 HtmlWebpackPlugin 插件

**作用：解决文件路径问题将 index.html 打包到 bundle.js 所在目录中（dist）
同时也会在 index.html 中自动的 script标签 引入 bundle.js**

npm install --save-dev html-webpack-plugin@4.5.0

webpack.config.js文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',//production development开发环境不压缩dist 
    entry: './src/main.js',
    plugins: [
        new HtmlWebpackPlugin({
           template:'./index.html'
        })
    ],
    output: {
        path: path.join(__dirname, './dist/'),
        filename: 'bundle.js'
    },

    module: { // 模块      
        rules: [ // 规则   
            {
                test: /\.css$/, // 正则表达式，匹配 .css 文件资源        
                use: [  // 使用的 Loader ,注意顺序不能错           
                    'style-loader',//js识别css
                    'css-loader'//将css转换为js
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    }
}

重新打包：

npm  run build

**index.html打包到dist文件夹里面 这样图片和index.html是相同的目录 浏览器的图片路径
background-image: url(21b04b956bdf9c6d99bfaa06b6a28a0d.png)刚好可以访问到**

运行index.html正常显示图片