Question

我正在尝试使用React（create-react-app）和Firebase来实现SSR。为此，我目前正在this tutorial和github dir之后进行webpack的配置：

module.exports = [{
    entry: './src/index.js',
    module: {
        rules: [
            {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.css$/i, use: ['style-loader', 'css-loader']},
        ]
    },
    output: {
        filename: 'public/bundle.js',
        path: __dirname
    }
}];

我有一个包含一些图像的资产文件夹。对于所有导入，webpack都会以某种方式返回以下错误：

ERROR in ./src/assets/images/capture_5_move_on/1.JPG 1:0
    Module parse failed: Unexpected character '�' (1:0)
    You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
    (Source code omitted for this binary file)
     @ ./src/shared/data.js 28:0-59 78:9-12
     @ ./src/modules/CartHolder/CartHolderMobile.js
     @ ./src/App.js
     @ ./src/index.js

Answer 1

您应该为图像使用文件加载器：https://github.com/webpack-contrib/file-loader。

这样：

module.exports = [{
    entry: './src/index.js',
    module: {
        rules: [
            {test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
            {test: /\.(png|jpe?g|gif)$/i, loader: 'file-loader', exclude: /node_modules/},
            {test: /\.css$/i, use: ['style-loader', 'css-loader']},
        ]
    },
    output: {
        filename: 'public/bundle.js',
        path: __dirname
    }
}];

Webpack在React映像导入时引发错误

1 个答案: