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

debugcn 发表于 Dev

里奇卡夫

我得到了错误。

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

这是装载机安装好。

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

+ [email protected]
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）的另一个项目相同，没有问题。

谢谢。

sdgluck

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。