老师，我这个没有报错，但是图片就是加载不出来！而且dist里面有生成了两张图片分别在不同路径下

张艺兴的宝贝 2022-11-01

源自：Babel 与 Webpack 5-5 使用file-loader处理CSS中的图片

收起

1回答

imooc_慕慕 2022-11-02 10:03:29

同学你好，分析如下：

由于没有完成的代码，因此猜测如下：

1、修改完配置之后是否删除dist文件重新打包；

2、检查index.css文件中的css属性是否修改，参考如下：

祝学习愉快~

收起回答

提问者张艺兴的宝贝 #1

index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
 
</body>
 
</html>

package.json

{
  "name": "webpack-css-image",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0"
  }
}

index.css

body {
    background-image: url('./img/lay.jpg');
    background-repeat: no-repeat;
}

index.js

1	`import` `'./index.css';`

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                test: /\.(jpg|png|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: 'img/[name].[ext]',
                    }
                }]
            }
        ]
    }
}

下面是生成的dist文件夹

2022-11-02 16:37:17

imooc_慕慕回复提问者张艺兴的宝贝 #2

同学你好，练习代码一定要跟老师视频中各个插件的版本保持一致，不然会出现未知的bug问题，因为同学使用的是webpack5版本、css-loader也是新版本导致配置也出现了差异，新版本处理图片打包不需要使用file-loader这个插件了，因此参考方案如下：
1、降低css-loader版本与老师的保持一致；
2、去掉file-loader插件，只用css-loader就可以了
将webpack.config.js文件中添加替换如下代码：
参考学习官方网址
祝学习愉快~

2022-11-02 17:58:24