從webpack5中的模板獲取影像時出錯-有解無憂

賞金將在 4 天后到期。此問題的答案有資格獲得 50聲望賞金。 Fernando Arbelo想提請更多人關注這個問題。

我正在開發一個基本的應用程式，所以我沒有使用某些框架，而是在 Webpack 的幫助下使用 Typescript。

問題是我無法讓 webpack 正確地從 html 模板中獲取影像。我能做到的唯一方法是使用 Typescript 操作 DOM，但目標是使其透明并直接從模板中獲取，而無需為其撰寫任何 typescript。

接下來我在配置中添加規則和一個基本的 html

webpack 分為 3 個檔案

webpack.common.js
webpack.dev.js
webpack.prod.js

webpack.common.js

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

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

  module: {
    rules: [
      {
        test: /\.ts$/,
        include: [path.resolve(__dirname, 'src')],
        use: 'ts-loader',
      },
      {
        test: /\.html$/,
        use: ["html-loader"]
      },
      {
        test : /\.(png|jp(e*)g|svg)$/,
        use : [{
          loader : 'url-loader',
          options : {
            limit : 800,
            name : 'images/[hash]-[name].[ext]'
          }
        }]
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  plugins: [new HtmlWebpackPlugin(
    {
      template: "./src/template.html"
    }
  )],
};

webpack.dev.js

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

module.exports = merge(common,{
    mode: "development",
    devtool: 'eval-source-map',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-loader",'css-loader'
                ]
            }
        ]
    },
    devServer: {
        proxy: {
          '/api': 'url of my api',
        },
      }
  }) ;

webpack.prod.js

const common = require("./webpack.common");
const { merge } = require("webpack-merge");

const MiniCssExtractPlugin = require('mini-css-extract-plugin');


module.exports = merge(common, {
    mode: "production",
    plugins: [
        new MiniCssExtractPlugin({ filename: "[name].[contenthash].css" })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    }
});

模板.html

........
....
<div>
            <h2 >Algo salió mal</h2>
            <picture >
                <img  src="assets/img/error.svg" id="error">
            </picture>
</div>

問題是部署生成的代碼如下：

<picture >
                <img  src="6cf31722af2d86e1084b.svg" id="error">
            </picture>

當6cf31722af2d86e1084b.svg包括

匯出默認webpack_public_path "images/a062cdc3b40c269bca1f81936119073c-error.svg";

uj5u.com熱心網友回復：

webpack v5 不推薦使用 url-loader。也許這會有所幫助？module:{rules:[{test:/\.(png|jp(e*)g|svg)$/i,type:'asset/resource'}]},. 請參閱 v5 棄用的 url-loader

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/535383.html

標籤：网页包html-webpack-插件网址加载器

上一篇：如何在TypeScript檔案中匯入CSS模塊？

下一篇：使用動態匯入時“找不到模塊”