Webpack 将错误的图像加载到 dist 目录

Question

我的webpack.config.js 文件

const path = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    index: './src/js/index.js',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: { minimize: true },
          },
        ],
      },
      {
        test: /\.(jpg|png)$/,
        use: {
          loader: 'url-loader',
        },
      },
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },

  output: {
    path: path.resolve(__dirname, './dist'),
    filename: './js/[name].bundle.js',
  },

  plugins: [
    new HtmlWebPackPlugin({
      template: path.resolve(__dirname, './src/index.html'),
      filename: 'index.html',
      chunks: ['index'],
    }),

    new CleanWebpackPlugin(),

    new MiniCssExtractPlugin({
      filename: './css/[name].css',
    }),

    new CopyWebpackPlugin({
      patterns: [{ from: './src/assets', to: './assets' }],
    }),
  ],

  devtool: 'source-map',
  mode: 'development',
};

我出现问题的文件结构：

奇怪的是，当我在terminal 中运行npm run build 时，所有目录都已正确加载我的意思是：background-image 有效，slider 带有图像的目录已加载，但还加载了一些附加文件带有随机数字名称

另外三个 .png 文件被加载到我的 index.html 为 img1.png img2.png 和 img3.png 文件在我的网站上不起作用，他们只是不想加载

Answer 1

这是由 Webpack 5 的新 Asset Modules 引起的。您可以删除 url-loader 并指定资产类型，如下所示：

{
    test: /\.(jpg|png)$/,
    type: 'asset/inline',
},

或者您可以通过将type: 'javascript/auto' 添加到您的规则来禁用资产模块：

{
  test: /\.(jpg|png)$/,
  use: {
    loader: 'url-loader',
  },
  type: 'javascript/auto'
}

请参阅the documentation 了解更多信息，并了解如何为file-loader 和raw-loader 执行此操作。

Answer 2

我刚刚解决了我的所有问题，因为在使用来自@ChillaBee 的答案后，图像可以正常工作，期望我在css 文件中使用的background photo 为url。使用上面的答案，但改变

{
    test: /\.(jpg|png)$/,
    type: 'asset/resource',
},

到

{
    test: /\.(jpg|png)$/,
    type: 'asset/inline',
},

现在可以正确加载来自 html 和 css 的图像

Answer 3

我认为你的图像文件可能是双重处理的，因为你曾经只是将你的资产文件夹复制到你的 dist 输出文件夹，然后你可能在某个地方使用带有 url("./someImage") 或类似的图像在你的 css 文件中，这些文件得到处理通过您的 css 加载程序或 css Mini Exctract 插件，它创建了那个神秘的图像资产输出，然后在您的 html 文件中使用，请看这里：webpack.js.org/guides/asset-management/#loading-images..不知道为什么需要复制资产文件夹，但这对我来说似乎是多余的......

编辑：我不是这方面的专家，但在调查了这个奇怪的错误几个小时后，我意识到图像文件的路径设置正确，但图像输出了该文件-loader 或其他使用图像生成的加载器（如 0f9b8be78d378ad2ef78.jpg）似乎有所不同，如果我在标准文本/二进制编辑器的 vscode 编辑器中打开它们，我会得到这一行：export default __webpack_public_path__ + "someimage.jpg";，使用 url-loader带有 data-url(..) 的 binary64 转换字符串.. 所以它似乎不是为了在静态 html 文件中使用它..

然后我在 webpack.config.js 中使用了推荐的方法：

        {   test: /\.(jpg|png)$/, 
            type: 'asset/resource', }

在我的图像正确显示之后，我不知道文件加载器等在做什么..

这是我最终的 webpack.config.js：

const path = require('path')

const HtmlWebPackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: {
        index: './src/js/index.js',
    },
    devServer: {
        port: 5757,
        contentBase: path.resolve(__dirname, 'src'),
        publicPath: '/src',
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: { minimize: true },
                    },
                ],
            },
            {
                test: /\.(jpg|png)$/,
                type: 'asset/resource',

            },
            {
                test: /\.(css|scss)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
        ],
    },

    output: {
        path: path.resolve(__dirname, './build'),
        //publicPath: './assets/images',
    },

    plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html',
            inject: 'body',
        }),

        new MiniCssExtractPlugin({
            filename: './css/[name].css',
        }),
    ],

    devtool: 'source-map',
    mode: 'development',
}