webpack 字体真棒，在根目录下转储文件答案

【问题标题】：webpack font awesome, dumping files at rootwebpack 字体真棒，在根目录下转储文件
【发布时间】：2021-08-04 00:57:38
【问题描述】：

我有下面的 webpack.config，当我在我的 index.js 中导入 font awesome 时，webpack 会将所有字体文件转储到根目录 (dist)。字体规则可以将它们放在“fonts”子文件夹中，但它也会以这种奇怪的格式（导出命令）将它们转储到根目录。

如果我不导入 fontawesome，它不会在根目录创建文件。我不明白它为什么会这样，关于如何解决的任何想法。

webpack.config.js：

const path = require('path');
const webpack = require('webpack');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require("vue-loader");

const srcPath = path.resolve(__dirname, './src');
const stylePath = path.resolve(srcPath, './styles');
const bldPath = path.resolve('../MyApp/wwwroot/dist');

module.exports = {
    devtool: 'source-map',
    entry: {
        master: path.resolve(srcPath, 'index.js'),
        style: `${stylePath}/style.css`
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
            },
            {
                exclude: /(node_modules|bower_components)/,
                include: srcPath,
                test: /\.js$/,
                use: [{ loader: 'babel-loader' }]
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            publicPath: './fonts/',
                            outputPath: './fonts/',
                            esModule: false
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: './images/',
                            publicPath: './images/',
                            esModule: false
                        }
                    }
                ]
            },
            {
                test: require.resolve("jquery"),
                loader: "expose-loader",
                options: {
                    exposes: ["$", "jQuery"],
                },
            }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendors: {
                    chunks: 'all',
                    name: 'vendor',
                    test: /[\\/]node_modules[\\/]/
                }
            }
        },
    },
    output: {
        path: `${bldPath}`,
        publicPath: '/wwwroot/dist/'
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [`${bldPath}/**`],
            dry: false,
            verbose: true,
            dangerouslyAllowCleanPatternsOutsideProject: true
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].min.css'
        })
    ]
};

index.js > 正在导入 fontawesome...

import '@fortawesome/fontawesome-free/css/all.css';

结果...

这些文件之一的内容...

【问题讨论】：

标签： webpack font-awesome

【解决方案1】：

看起来我导入 fontawesome 5 错误，我最终在我的条目 js 文件 (index.js) 中执行此操作。现在所有图标都可用，不再将所有字体转储到 /dist 根目录。

导入'@fortawesome/fontawesome-free/js/fontawesome' 导入'@fortawesome/fontawesome-free/js/solid' 导入'@fortawesome/fontawesome-free/js/regular' 导入'@fortawesome/fontawesome-free/js/brands'

我在哪里找到了答案：

How to make Font awesome 5 work with webpack

【讨论】：