Imej WebPack tidak dimuatkan menggunakan pemuat fail

Question

Pada masa ini, saya mempunyai projek webpack 5 yang memerlukan beberapa imej svg dan imej latar belakang. Imej svg dikodkan ke dalam fail template.html. Imej latar belakang dirujuk dalam fail style.css. Apabila saya menjalankan binaan, tiada imej dibina pada halaman web. Mereka kekal dalam bentuk cincang (walaupun saya menggunakan nama tersuai dalam ujian pemuat fail.

Berikut ialah fail konfigurasi webpack semasa:

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: '[name].[ext]',
                        outputPath: 'assets/images/'
                      }
                    }
                ]
            },
            {
                test:/\.html$/,
                use: [
                  'html-loader'
                ]
              },
        ],
    },
};

Berikut ialah coretan yang menunjukkan cara svg dilaksanakan

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

Akhir sekali, berikut ialah imej program semasa ia dibina: Ralat imej semasa membina

Saya telah mencuba menggunakan format pemuat fail, serta mengalih keluarnya. Struktur fail saya kelihatan seperti ini:

Struktur fail

Saya tidak mendapat sebarang ralat, imej itu muncul dalam kod yang digabungkan tetapi dalam bentuk cincang dan tidak muncul dalam tapak web langsung.

Answer 1

Anda memerlukan pemalam html-loader dan html webpack. Ia akan menulis semula fail html anda dengan nama cincang.

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

dan gantikan peraturan svg dengan

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