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

问题出现在我的文件结构中:

奇怪的是，当我在终端中运行npm run build时，所有目录都被正确加载，包括background-image和slider文件夹中的图像被加载，但还会加载一些带有随机数字名称的额外文件。

那三个额外的.png文件被作为img1.png、img2.png和img3.png文件加载到我的index.html中，在我的网站上无法正常工作，它们就是不想加载。

- user15076617

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

请查看文档，了解更多信息，并查看如何对file-loader和raw-loader执行此操作。请注意保留HTML标签。

- Mitch Talmadge

Answer 2

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

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

然后我按照webpack.config.js中的推荐方式进行了操作：

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

之后我的图片正确显示了，我不知道file-loader等工具在做什么。

这是我的最终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',
}

- MMMM

---

你可以尝试在 "output" 配置中添加 publicPath: '/' 选项，或者尝试使用 file-loader：npm i file-loader 并在配置中加入 { test: /\.(jpe?g|png|gif|svg)$/i, use: 'file-loader' }。 - MMMM

然后我成功加载了所有照片，它们都有随机数字名称。此外，我还得到了3个其他具有随机数字值的.png文件，但是出现了“图像未加载”的错误，就像之前一样。同时，我的资产文件夹也没有出现，所有png文件都加载到了主要的./dist目录中。 - user15076617

我在index.js中导入css，因为webpack会自动将其导入到html中。 - user15076617

将图像导入HTML的代码如下：

- user15076617

你能给我展示一下你所做的所有更改的配置吗？ - user15076617

Answer 3

我刚刚解决了我的所有问题，因为在使用@ChillaBee的答案后，图片正常工作，除了我在css文件中用作url的背景照片。请使用上面的答案，但进行更改。

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

到

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

现在HTML和CSS中的图像已经正确加载。

- user15076617