从模板中获取图像时出错 webpack 5

Question

I am developing a basic application so instead of using some framework I am just using Typescript with the help of Webpack.

The problem is that I can't get webpack to take the images from the html template correctly. The only way I could do it is by manipulating the DOM with Typescript, but the goal is to make it transparent and take it directly from the template without having to write any typescript for it.

Next I add the rules in the config and a basic html

The webpack it's separated in 3 files

1. webpack.common.js
2. webpack.dev.js
3. 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'
                ]
            }
        ]
    }
});

template.html

........
....
<div>
            <h2 class="text-danger mb-0">Algo salió mal</h2>
            <picture class="qr">
                <img class="error" src="assets/img/error.svg" id="error">
            </picture>
</div>

The problem is that after deploying de code generated is the following:

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

when 6cf31722af2d86e1084b.svg include

export default webpack_public_path + "images/a062cdc3b40c269bca1f81936119073c-error.svg";

Answer 1

url-loader is deprecated for webpack v5. Maybe this will help? module:{rules:[{test:/\.(png|jp(e*)g|svg)$/i,type:'asset/resource'}]}, . See url-loader deprecated for v5