WebPack 映像未使用檔案載入器載入

Question

目前，我有一個 webpack 5 項目，需要幾個 svg 圖片和一個背景圖片。 svg 圖像被編碼到 template.html 檔案中。背景圖像在 style.css 檔案中引用。當我運行建置時，網頁上沒有建立任何圖像。它們保持散列形式（即使我在文件載入器測試中使用自訂名稱。

下面是目前的 webpack 設定檔：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/js/index.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: './src/template.html',
        }),
      ],
    devtool: 'inline-source-map',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'docs'),
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use:['style-loader','css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpe?g|gif)$/i,
                use: [
                    {
                      loader: 'file-loader',
                      options: {
                        name: '[名].[ext]',
                        outputPath: 'assets/images/'
                      }
                    }
                ]
            },
            {
                test:/\.html$/,
                use: [
                  'html-loader'
                ]
              },
        ],
    },
};

下面是一個片段，展示了 svg 是如何實現的

<div class="studyTime">
      <div id="timeManager">
        <div id="toDoButtons">
          <button id="new"><img src="./assets/images/add.svg" alt=""></button>
          <button id="clear"><img src="./assets/images/clear.svg" alt=""></button>
        </div>
        <div id="todo">

        </div>
      </div>
      <img class="openDrawer" id="timeOpen" src="./assets/images/left.svg" alt="">
    </div>
    <div class="clock">
      <div class="clock-face">
        <div class="core"></div>
        <div class="hand" id="hour-hand"></div>
        <div class="hand" id="min-hand"></div>
        <div class="hand" id="second-hand"></div>
      </div>
    </div>

最後，這是程式建置時的圖片： 建置時出現映像錯誤

我嘗試過使用檔案載入器格式，以及刪除它。我的文件結構如下所示：

檔案結構

我沒有收到任何錯誤，圖像出現在捆綁程式碼中，但以雜湊形式出現，並且不會出現在即時網站中。

Answer 1

你需要 html-loader 和 html webpack 外掛。它會用雜湊名稱重寫您的 html 檔案。

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: path.resolve(__dirname, './dist/js/index.html'),
      template: path.resolve(__dirname, './src/template.html')
    })
  ]

並將 svg 規則替換為

module: {
    rules: [
      {
       test: /\.svg/,
       type: 'asset'
     }
    ]
  }