使用文件加载器加载Webpack车把图像

2024-05-20 • 问答

不确定我是否正确地解决了这个问题，但是我正在尝试将把手模板与Webpack中的文件加载器一起使用。我遇到的问题是我的图像资源文件夹没有被复制到dist文件夹，并且img src正在通过文件加载器解决以引入图像。如果有我找不到的帖子会有所帮助，请分享，或者如果有一篇包含有用信息的文章，我也会考虑。

在此先感谢您的帮助。

Webpack.config

const webpack = require('webpack');

module.exports = {
  entry: "./src/index.js",plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        handlebarsLoader: {}
      }
    })
  ],module: {
    rules: [
      {
        test: /\.handlebars$/,loader: "handlebars-loader"
      },{
        test: /\.html$/,use: ["html-loader"]
      },{
        test: /\.(svg|png|jpe?g|gif)$/i,use: {
          loader: "file-loader",options: {
            name: "[name].[hash].[ext]",outputPath: "imgs/",useRelativePath: true
          }
        }
      }
    ]
  }
}

车把模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>{{ htmlWebpackPlugins.options.title }}</title>
</head>

<body>
  {{> templates/title}}
  <img src="./assets/serve.svg" alt="Serve svg" />
</body>

</html>

const CopyWebpackPlugin = require('copy-webpack-plugin'); plugins: [ new CopyWebpackPlugin([ { from: './src/assets',to: './assets' } ]) ]

使用文件加载器加载Webpack车把图像

nmwangyu 回答：使用文件加载器加载Webpack车把图像

大家都在问