Блог

Я использую в своем проекте две библиотеки:

 "leaflet": "^1.0.3",
"react-leaflet": "^1.9.1",
 

Я импортирую следующие стили в свой файл map.less:

 @import "../../../../../../node_modules/leaflet/dist/leaflet.css";
 

Я вижу некоторые ошибки, связанные с файлами png, включенными в пакет листовок. Один из них находится ниже:

 ERROR in ./node_modules/leaflet/dist/images/marker-icon.png
    Module parse failed: Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type.
    (Source code omitted for this binary file)
     @ ./node_modules/css-loader?{"minimize":true}!./node_modules/leaflet/dist/leaflet.css 7:6181-6216
     @ ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/lib??ref--5-3!./node_modules/less-loader/dist/cjs.js??ref--5-4!./src/app/components/toolkit/monitor-management/monitor-management-settings/map.less
 

Это моя конфигурация веб-пакета:

 const config = {
    some aliases outputs, entries etc...
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules')
                ],
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/react'
                        ],
                        plugins: [
                            '@babel/plugin-proposal-class-properties',
                            '@babel/plugin-proposal-export-default-from',
                            'babel-plugin-jsx-remove-data-test-id'
                        ]
                    }
                }]
            },
            {
                test: /.less$/,
                include: [
                    path.resolve(__dirname, 'src'),
                    path.resolve(__dirname, 'modules/src')
                ],
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                minimize: true
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function () {
                                    return [
                                        require('autoprefixer')
                                    ];
                                }
                            }
                        },
                        {
                            loader: 'less-loader',
                            options: {}
                        }
                    ]
                })
            },
            {
                test: /.(ttf|eot|svg|woff|woff2)(?v=[0-9].[0-9].[0-9])?$/,
                exclude: [
                    path.resolve(__dirname, 'public/img')
                ],
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: '/fonts/',
                    publicPath: '/login/fonts/'
                }
            },
            {
                test: /.(svg|png|jp(e*)g)$/,
                include: [
                    path.resolve(__dirname, 'public/img')
                ],
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10, // Convert images to base64 strings
                            name: '[name].[ext]',
                            outputPath: '/img/',
                            publicPath: '/login/img/'
                        }
                    }
                ]
            },
        ],
    },
    some plugins...
}
 

На мой взгляд, я смог бы загрузить png благодаря url-загрузчику.

Может быть, причина в другом месте. Может быть, мне следует использовать загрузчик файлов для обработки этого дела?

Проблема здесь заключается в node_modules том, что в данном случае требуется изображение именно от node_modules/leaflet/dist/images/marker-icon.png этого . Тем не менее, url-loader он настроен только для обработки только этого: path.resolve(__dirname, 'public/img') вот почему все изображения в других местах не могут быть обработаны.

Обычно вы можете либо добавить в него больше путей, либо полностью удалить его (это то, что я предпочитаю):

 {
  test: /.(svg|png|jp(e*)g)$/,
  // Remove this
  // include: [
  //    path.resolve(__dirname, 'public/img')
  // ],
  use: [
    // ...
  ]
},