How to set up webpack to work with require on the client?

Question

css

Tell me there is a project on react, you need to use require instead of import in one of the places, but there is no require on the client.

How it is possible to bypass this problem? So that you can write webpack.config insteadimport RadarChart from "components/Radar";

const RadarChart = require("components/Radar");

const path = require('path');
const Html = require('html-webpack-plugin');
const { CleanWebpackPlugin: Clean } = require('clean-webpack-plugin');
const Copy = require('copy-webpack-plugin');

const MomentLocales = require('moment-locales-webpack-plugin');

module.exports = {
  entry: {
    editor: './src/editor.entrypoint.js',
    public: './src/public.entrypoint.js',
  },
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/i,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|jpg|jpeg|gif|woff|eot|ttf|otf)$/i,
        loader: 'file-loader',
        options: {
          outputPath: 'assets',
        },
      },
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
    alias: {
      clearText: path.resolve(__dirname, 'src/clearText.js'),
      components: path.resolve(__dirname, 'src/components/'),
      connectors: path.resolve(__dirname, 'src/connectors/'),
      containers: path.resolve(__dirname, 'src/containers/'),
      contexts: path.resolve(__dirname, 'src/contexts/'),
      fonts: path.resolve(__dirname, 'src/fonts/'),
      helpers: path.resolve(__dirname, 'src/helpers.js'),
      hooks: path.resolve(__dirname, 'src/hooks/'),
      mock: path.resolve(__dirname, 'src/mock/'),
      img: path.resolve(__dirname, 'src/img/'),
      pages: path.resolve(__dirname, 'src/pages/'),
      utils: path.resolve(__dirname, 'src/utils/'),
      slice: path.resolve(__dirname, 'src/slice/'),
      colors: path.resolve(__dirname, 'src/colors/'),
      reusedStyles: path.resolve(__dirname, 'src/reusedStyles/'),
      media: path.resolve(__dirname, 'src/media/'),
      commonHelpers: path.resolve(__dirname, 'src/commonHelpers/'),
    },
  },
  plugins: [
    new MomentLocales(),
    new Clean(),
    new Copy([{ from: 'public', to: '.' }]),
    new Html({
      chunks: ['public'],
      hash: true,
      scriptLoading: 'defer',
      template: 'public/index.html',
    }),
    // new BundleAnalyzer(),
  ],
  devServer: {
    disableHostCheck: true,
    historyApiFallback: true,
    overlay: {
      warnings: true,
      errors: true,
    },
    port: 3000,
    proxy: {
      '/api': {
        target: '----',
        secure: false,
        changeOrigin: true,
      },
    },
  },
};

Answer 1

<a href="#" class="link_css">Hide link text</a>
Something like this, and there is no empty link and is depicted in CSS.
Sprites are great.
If the icon is an image, then in img;)
I think that this is the same holivar as with where to store JS libraries: locally or on a CDN