0

Context

First I did a lot of research, but I did not succeed.

I am using django as backend, and to manage my frontend dependencies I am using webpack (starter) which I modified to fit my needs.

Here is a part of my structure for the npm / webpack management :

  • frontend
    • src
    • public
    • build
      • public

I am using CopyWebpackPlugin to manage my assets, like images and fonts. All assets placed in the public folder are correctly copied to the build/public.
However, I tried to add a new pattern entry to get fonts from fontawesome located in node_modules and copy it to the build/public folder, but I get errors whatever I am trying. I can't figure out what I am doing wrong.

Pattern entries

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'
            },
        ]
    }
),

Error

ERROR in Plugin name should be specified

So I tried to get only one file, by naming explicitly via to, and it is working.

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

But I would like to get it working through the entire folder.
Then I wonder that the problem was caused by the module rules :

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

I tried some modifications, but I didn't came to any solution.

Edit

I also tried this @Andrey : isolate the process for fonts and images in their own test. Well nothing changes :/

{
    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/'
        },
    },
},

Even removing these test led me to the same error. So I guess it is from my patterns definition.

I saw that there was 3 errors on name, so I have removed the three .svg files from the webfonts node_modules. And it has built successfully. So I am still stuck because I don't know how is it possible...

Devart
  • 320
  • 4
  • 18

2 Answers2

0

I think it is worth to try to remove [path] from loader settings. Not sure how webpack is expected to treat loaded files which contain full path in their name when you ask CopyPlugin to copy them.

Andrey
  • 1,752
  • 18
  • 17
  • I thought too, but it did not resolve my issue. But of course, I will keep it without `[path]` you are right. – Devart Apr 20 '21 at 09:20
0

I feel like a dumb...

I figure out that it was my image-minimizer-webpack-plugin attempting to apply optimizations on the 3 .svg webfonts.

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

At the moment, I have deactivated the svgo part, and it is working well. Eventually I would try to exclude the optimization when the svg come from the node_modules

Devart
  • 320
  • 4
  • 18