Question

我是新来的人，我正在一个项目中，我只需要使用几个很棒的SVG图标（v5），并且我已经按照[https://fontawesome.com/how-to-use/on-the-web/using-with/react][1]我将文件与Web Pack捆绑在一起时，我注意到捆绑包的大小（对于我正在做的事情来说太大了），我查看了捆绑包文件，意识到即使我仅导入并添加了一些字体，Web Pack仍在导入所有字体其中的到图书馆。这是我的网络打包配置：

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
  }
}

和超棒的字体库：

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
    )

我正在使用react v16.4，web-pack v4.14和react-fontawesome v0.1.3 我做错了什么吗？如何仅将特定图标添加到我的捆绑包中？

Web Pack 4不适用于超棒的字体库。add（）

0 个答案: