Webpack 图像加载器错误答案

【问题标题】：Webpack image loader ErrorWebpack 图像加载器错误
【发布时间】：2017-10-29 17:20:29
【问题描述】：

我在尝试将图像导入我的项目时遇到问题，在构建时收到此错误：模块解析失败：C:\Users\Angelo\OptaService\OptaService\images\ImageTest.png 意外字符 '�' (1:0 ) 您可能需要适当的加载程序来处理此文件类型。

这是我的 webpack 配置：

module: {
    rules: [
        {test: /\.(js)$/, use: 'babel-loader', exclude: /node_modules/},
        {test: /\.css$/, use: ['style-loader', 'css-loader']},

    ],
    loaders: [ {
        test: /\.js|.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
    }, {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
    } ]
},

我已经 npm 安装了 image-webpack-loader 和 file-loader。我也像这样在组件中导入图像：

import image from './../../images/ImageTest.png';

...

<img className="img-fluid" src={image} alt="OptaService Logo"/>

提前致谢！

【问题讨论】：

标签： reactjs webpack

【解决方案1】：

最好设置您的 Webpack 配置文件以分别支持生产和开发中的不同文件类型，最大程度地支持所有文件。为此，我建议您在项目的根目录中为您的 Webpack 配置提供 3 个文件。

webpack.common.js 用于生产和开发之间的通用设置
用于生产的 webpack.prod.js
用于开发的 webpack.dev.js

webpack.common.js

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: {
    app: './src/App.js'
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[id].[hash].css'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[local]--[hash:base64:5]',
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif|pdf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]'
            }
          }
        ]
      }
    ]
  }
};

webpack.prod.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
  mode: 'production',
});

webpack.dev.js

const path = require("path");
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'source-map',
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 8181,
    open: 'google chrome',
    historyApiFallback: true
  }
});

使用这 3 个配置文件，您需要在项目的根目录下使用 'dist' 和 'src' 目录。

【讨论】：

【解决方案2】：

这是我设置 webpack 配置的方式，您正在混合加载器和规则，您可以查看 docs 以进一步研究如何正确设置您的配置。

module: {
  rules: [
    {
      test: /\.js|.jsx?$/,
      use: 'babel-loader',
      exclude: /node_modules/
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(jpe?g|png|gif|svg)$/i,
      loaders: [
        'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
       ]
    }
  ]
},

【讨论】：