如何在 webpack 中使用文件加载器

Question

我遇到了错误。

ERROR in ./src/images/whitepark-bay.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type

加载器安装到这里就OK了。

richgk@DESKTOP-54JFAJP:~/projects/antrim-walks$ npm install file-loader --save-dev
npm WARN antrim-walks@1.0.0 No description
npm WARN antrim-walks@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ file-loader@6.0.0
added 4 packages from 6 contributors and audited 420 packages in 6.973s

还有webpack.config.js

const path = require('path');
module.exports = {
    module: {
        rules: [
          {

            test: /\.css$/,
            use: [
              'style-loader',
              'css-loader'
            ],

            test: /\.(png|gif|jpg)$/i,
            use: [
              {
                loader: 'file-loader',
              },
            ],

          },
        ]
    },
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'development',
};

我不确定我做错了什么，它看起来和我使用文件加载器（也尝试过 url-loader）的另一个项目一样没有问题。

谢谢。

Answer 1

您将 file-loader 模块规则放在了错误的位置。对于 css- 和 style-loader 规则，它应该是 单独的 规则。

你有：

{
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ],

    test: /\.(png|gif|jpg)$/i,
    use: [{
        loader: 'file-loader',
    }, ],

},

你想要什么：

{
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ],
},
{
    test: /\.(png|gif|jpg)$/i,
    use: [{
        loader: 'file-loader'
    }],
},

如何在 webpack 中使用文件加载器

How to use file-loader with webpack

loader

webpack