web-pack 4 не будет работать со шрифтом awesome library.add () - PullRequest
Новая
       11

web-pack 4 не будет работать со шрифтом awesome library.add ()

0 голосов
/ 19 октября 2018

Я новичок, чтобы среагировать, и я работаю над проектом, в котором мне нужно использовать только несколько шрифтов, удивительные иконки SVG (v5), и я сделал все в соответствии с [https://fontawesome.com/how-to-use/on-the-web/using-with/react][1], но когда ясвязывая мои файлы с веб-пакетом, я заметил размер пакета (слишком большой для того, что я делал), и я посмотрел на файлы пакета и понял, что веб-пакет импортирует все шрифты, хотя я импортировал и добавил тольконемногие из них в библиотеку.Вот мой конфиг веб-пакета: 

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

const inProduction = (process.env.NODE_ENV.trim() === 'production');
console.log('production mode ==> ',inProduction);
module.exports = {
  entry: {
    app:'./src/index.jsx'
  },
  output: {
    path: path.resolve(__dirname,'public/'),
    filename: inProduction ? '[name].min.js' : '[name].js'
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: "css-loader",
        fallback: "style-loader"
      })
    },
    {
      test: /\.s[ac]ss$/,
      use: ExtractTextPlugin.extract({
        use: [{
              loader: 'css-loader'
          }, {
              loader: 'sass-loader'
          }]
        , fallback: 'style-loader'
      })
    },
    {
      test: /\.(eot|ttf|woff|woff2)$/,
      loader: 'file-loader',
      options: {
        name: 'fonts/[name].[ext]',
        emitFile: true,
        outputPath: './assets/',
        publicPath: '../'
      }
    },
    {
      test: /\.(svg|png|jp?eg|gif)$/,
      loader: 'file-loader',
      options: {
        name: 'assets/img/[name].[ext]',
      }
    },
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }]
  },
  mode: inProduction? 'production' : 'development',
  resolve: {
    alias: {
      assets: path.resolve(__dirname,'src/assets/'),
      global: path.resolve(__dirname,'src/components/global/'),
      components: path.resolve(__dirname,'src/components/')
    }
  },
  plugins:[
    new webpack.optimize.AggressiveMergingPlugin(),
    inProduction ? new ExtractTextPlugin('assets/css/[name].min.css') :
    new ExtractTextPlugin('assets/css/[name].css'),
    new webpack.LoaderOptionsPlugin({
      minimize: inProduction
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks:['app','vendors'],
      template: './src/index.html',
      filename: './index.html'
    }),
    new webpack.optimize.AggressiveMergingPlugin()
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      name: 'vendors'
    },
    minimize: inProduction
  }
}

и библиотека шрифтов awesome: 

import { library } from '@fortawesome/fontawesome-svg-core';
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons/faExclamationTriangle';
import { faPinterestP, faGooglePlusG, faFacebookF, faTwitter, faInstagram } from '@fortawesome/free-brands-svg-icons';
import { faCopyright } from '@fortawesome/free-regular-svg-icons/faCopyright';

library.add(
    faPinterestP,
    faGooglePlusG,
    faFacebookF,
    faTwitter,
    faInstagram,
    faExclamationTriangle,
    faCopyright
    )

Я использую реагирование v16.4, веб-пакет версии 4.14 и response-fontawesomev0.1.3 что-то не так делаю?как я могу добавить только определенные значки в свой комплект?

...