0

语境

首先我做了很多研究，但我没有成功。

我使用 django 作为后端，为了管理我的前端依赖项，我使用了 webpack (starter)，我对其进行了修改以满足我的需要。

这是我的 npm / webpack 管理结构的一部分：

  • 前端
    • 源代码
    • 上市
    • 建造
      • 上市

我正在使用 CopyWebpackPlugin 来管理我的资产，例如图像和字体。放置在public文件夹中的所有资产都正确复制到build/public.
但是，我尝试添加一个新模式条目以从位于 node_modules 中的 fontawesome 获取字体并将其复制到build/public文件夹中，但无论我尝试什么都会出错。我无法弄清楚我做错了什么。

模式条目

output: {
    path: Path.join(__dirname, '../build'),
    filename: 'js/[name].js',
},
...
new CopyWebpackPlugin(
{
        patterns: [
            {from: Path.resolve(__dirname, '../public'), to: 'public'},
            {
                from: Path.resolve(__dirname, '../node_modules/@fortawesome/fontawesome-free/webfonts'),
                to: 'public/fonts'
            },
        ]
    }
),

错误

应指定插件名称中的错误

所以我试图通过显式命名来获取一个文件，to并且它正在工作。

{
    from: Path.resolve(__dirname, '../node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot'),
    to: 'public/fonts/fa-brands-400.eot'
},

但我想让它在整个文件夹中工作。
然后我想知道问题是由模块规则引起的：

{
    test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
    use: {
        loader: 'file-loader',
        options: {
            name: '[path][name].[ext]',
        },
    },
},

我尝试了一些修改，但没有找到任何解决方案。

编辑

我也试过这个@Andrey：将字体和图像的过程隔离在自己的test. 好吧，什么都没有改变：/

{
    test: /\.(eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
    /* Exclude images while working with fonts, e.g. .svg can be both image or font. */
    exclude: Path.resolve(__dirname, '../public/images'),
    use: {
        loader: 'file-loader',
        options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
        },
    },
},

即使删除这些测试也会导致我犯同样的错误。所以我想这是来自我的模式定义。

我看到上面有 3 个错误name，所以我.svg从 webfonts node_modules 中删除了这三个文件。它已经成功构建。所以我仍然卡住了，因为我不知道这怎么可能......

4

2 回答 2

0

我认为值得尝试从加载程序设置中删除 [path]。当您要求 CopyPlugin 复制它们时，不确定 webpack 如何处理名称中包含完整路径的加载文件。

于 2021-04-19T16:52:16.560 回答
0

我觉得自己像个傻子...

我发现这是我image-minimizer-webpack-plugin尝试对 3 个.svgwebfonts 应用优化。

new ImageMinimizerPlugin({
    minimizerOptions: {
        // Lossless optimization with custom option
        plugins: [
            ['gifsicle', {interlaced: true}],
            ['jpegtran', {progressive: true}],
            ['optipng', {optimizationLevel: 5}],
            [
                'svgo',
                {
                    plugins: [
                        {
                            removeViewBox: false,
                        },
                    ],
                },
            ],
        ],
    },
}),

目前，我已停用该svgo部件，并且它运行良好。最终，当 svg 来自 node_modules 时，我会尝试排除优化

于 2021-04-20T13:11:38.333 回答