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

我認為你的圖像文件可能是雙重處理的，因為你曾經只是將你的資產文件夾復制到你的 dist output 文件夾，然后你可能會在你的 css 文件中使用帶有url("./someImage")或類似的圖像，其中get processed by your css loader or css Mini Exctract plugin, which creates that cryptic image asset output, that then gets used in your html files, look at here: webpack.js.org/guides/asset-management/#loading-images. .我不知道你為什么需要復制你的資產文件夾，但這對我來說看起來是多余的......

編輯：我不是這方面的專家，但在調查了這個奇怪的錯誤幾個小時后，我意識到路徑已正確設置為圖像文件，但文件加載器或其他加載器生成的圖像 output 與圖像（像 0f9b8be78d378ad2ef78.jpg) 似乎有些不同，如果我在標准文本/二進制編輯器的 vscode 編輯器中打開它們，我會得到這一行： export default __webpack_public_path__ + "someimage.jpg"; ，使用 url-loader 其二進制 64 轉換字符串與 data-url(..).. 所以它似乎不是為了在 static 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',
}

Answer 2

我剛剛解決了我的所有問題，因為在使用@ChillaBee的答案后，圖像工作正常，期望我在css文件中使用的background photo為url 。 使用上面的答案，但改變

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

至

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

現在來自 html 和 css 的圖像已正確加載

Answer 3

這是由 Webpack 5 的新資產模塊引起的。 您可以刪除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器執行此操作。