个人中心
gpt4 book ai didi

Html-loader + file-loader 没有捆绑正确的图像源

转载 作者：行者123 更新时间：2023-12-01 21:52:14 29 4
gpt4 key购买 nike

我计划将 Webpack 用于一个项目，并且我正在使用 Html-loader + file-loader 设置我的工作流程，以获取带有图像动态 src 的生产 html 文件，正如 Colt Steele 在 this video 中所教的那样.这是我的 src/文件:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Popular on Letterboxd</title>
</head>
<body>
  <img src="./assets/chira.jpg" />
</body>
</html>

index.js:

import img from './assets/chira.jpg';
import "./main.css";

和 main.css

body {
  background-color: darkblue;
}

这些是我的配置文件(我有一个用于开发和生产的个人，以及一个用于两者的公共(public)配置文件):

webpack.common.js:

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

module.exports = {
  entry: './src/index.js',

  devtool: "none",
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash].[ext]',
              publicPath: 'assets',
              outputPath: 'assets/img'
            }
          }
        ]
      }
    ],
  },
};

webpack.dev.js:

const path = require('path');
const common = require("./webpack.common");
const merge = require('webpack-merge');

module.exports = merge(common, {
  mode: "development",
  devServer: {
    contentBase: path.join(__dirname, 'src'),
  },
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
});

和 webpack.prod.js:

const path = require('path');
const common = require("./webpack.common");
const merge = require('webpack-merge');


module.exports = merge(common, {
  mode: "production",
  output: {
    filename: "main.[contentHash].js",
    path: path.resolve(__dirname, "dist")
  },
});

但是，当我运行 npm run build 时，它会执行以下命令:

"build": "webpack --config webpack.prod.js"

我得到了预期的带有 assets/img/[name].[hash].[ext] 的 dist 文件夹，但是在我的 index.html 中我没有得到预期的 src 标签:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Popular on Letterboxd</title>
</head>
<body>
  <img src="[object Module]" />
<script type="text/javascript" src="main.e55bd4ff82bf2f5cec90.js"></script></body>
</html>

一段时间以来，我一直在努力解决这个问题，但我似乎无法在任何地方得到正确的答案，而且到目前为止，我尝试过的任何方法都没有奏效。如果遇到此问题的任何人都可以解决他们如何修复它，或者如果有人知道问题可能是什么以及我能做什么，我将不胜感激。提前致谢!

最佳答案

如果您使用的是 webpack 5 或更高版本，file-loader 将被删除。 File loader documentation您可以改用模块 asset/resource 。删除您的 file-loader 规则并将以下规则添加到 webpack.common.js 中的模块

module: {
    rules: [
        {
            test: /\.(png|jpe?g|gif|svg)$/i,
            type: 'asset/resource'
        }
    ]
},

然后在 webpack.prod.js 的 output 中添加 assetModuleFilename

output: {
    assetModuleFilename: "assets/img/[name].[hash][ext]"
}

并在 webpack.common.js 中保留你的 html-loader 规则。

引用文献 Asset Modules

关于Html-loader + file-loader 没有捆绑正确的图像源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59062150/

29 4 0
文章推荐： javascript - 使用 createSpyObj 创建 spy 时 callThrough 不起作用
文章推荐： C# Moq 方法不返回指定的 bool 值
文章推荐： openssl - 使用静态链接构建 libcurl 到 openssl
文章推荐： nuget - 在我的 Nuget 包中包含我的 Nuget 自述文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com