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 >Algo salió mal</h2>
            <picture >
                <img  src="assets/img/error.svg" id="error">
            </picture>
</div>

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

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

when 6cf31722af2d86e1084b.svg include

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

CodePudding user response：

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