Пропали иконки font awesome

Question

Есть верстка, html вставлен в JS.

  toHTML() {
    return `
       ...
         <div class="header__logo">
         <img src="${require('../../static/img/logo.png')}" alt='logo Dictionary, 3000 words'>
         </div>
       ...
       ...
        <div class="footer__icons">
            <a href="/"><i class="fab fa-github"></i></a>
            <a href="/"><i class="fab fa-instagram"></i></a>
            <a href="/"><i class="fab fa-linkedin-in"></i></a>
        </div>
      ...
     `
  }

в верстке используются иконки FontAwesome, импортированы в index.js - import '@fortawesome/fontawesome-free/js/fontawesome.min' Все собрано при помощи webpack'а, пока верстка лежала в html - иконки отображались. Как только перенес верстку в JS, иконки пропали. Подскажите что не так с иконками.

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')


const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd

const fileName = ext => isDev ? `bundle.${ext}` : `bundle.[hash].${ext}`

module.exports = {
  context: path.resolve(__dirname, 'src'),
  mode: 'development',
  entry: ['@babel/polyfill', './index.js'],
  output: {
    filename: fileName('js'),
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.js', '.scss'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@core': path.resolve(__dirname, 'src/core'),
      '@img': path.resolve(__dirname, 'src/static/img'),
    }
  },
  target: isDev ? 'web' : 'browserslist',
  devtool: isDev ? 'source-map' : false,
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 9000,
    hot: isDev,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './index.html',
      inject: 'body',
      minify: {
        removeComments: isProd,
        collapseWhitespace: isProd,
      },
    }),
    new MiniCssExtractPlugin({
      filename: fileName('css')
    }),
    new ESLintPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {},
          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(jpg|png|jpeg|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'img/[name][ext][query]'
        }
      },
      {
        test: /\.(svg)$/,
        type: 'asset/resource',
        generator: {
          filename: 'icon/[name][ext][query]'
        }
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
    ]
  }
}

Answer 1

xDD

в общем я разобрался, чтобы не раздувать Js файл из-за 5ти иконок, импортировал fontawesome.min вместо all.min.js.

Так вот мои иконки были в regular.min.js, исправил импорт - появились.

Вопрос закрыт.

БЛОГ НА HUSL

Пропали иконки font awesome

Ответы (1 шт):