Webpack项目导入图片失败求助（版本v2.2.0-rc.0）

嘿，我帮你定位到问题所在啦！你的核心问题出在图片文件的正则匹配规则里多了不必要的空格，导致Webpack无法正确识别图片格式，自然不会调用对应的loader去处理它们。

问题根源分析 #

先看你webpack.config.js里的图片处理规则：

{ 
  test: /\.(jpe?g | png | gif |svg)$/, 
  use: [ 
    { loader: 'url-loader', options: { limit: 40000 } }, 
    'image-webpack-loader' 
  ] 
}

正则表达式里的jpe?g 、png 、gif 这些带空格的写法是错误的——比如你的big.jpg文件名里没有空格，根本不会被jpe?g （带空格）这个规则匹配到，Webpack就会把它当成未知文件类型，抛出解析错误。

一步步解决问题 #

1. 修复正则匹配规则 #

把图片规则里的正则改成无空格的正确版本：

{ 
  test: /\.(jpe?g|png|gif|svg)$/, 
  use: [ 
    { loader: 'url-loader', options: { limit: 40000 } }, 
    'image-webpack-loader' 
  ] 
}

2. 确保依赖包安装完整 #

url-loader依赖file-loader来处理超过limit阈值的图片文件，所以你需要确保这几个依赖都安装到位：

npm install --save-dev file-loader url-loader image-webpack-loader

3. 可选优化：正确使用导入的图片 #

你的image_viewer.js里导入图片的方式是对的，如果之后要在页面中实际使用这些图片，可以调整成这样（更规范）：

import bigImage from '../assets/big.jpg';
import smallImage from '../assets/small.jpg';
import '../styles/image_viewer.css';

// 创建并添加大图元素
const bigImg = document.createElement('img');
bigImg.src = bigImage;
document.body.appendChild(bigImg);

// 小图同理
const smallImg = document.createElement('img');
smallImg.src = smallImage;
document.body.appendChild(smallImg);

修正后的完整webpack.config.js #

const path = require('path'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const config = { 
  entry: './src/index.js', 
  output: { 
    path: path.resolve(__dirname, 'build'), 
    filename: 'bundle.js' 
  }, 
  module: { 
    rules: [ 
      { 
        use: 'babel-loader', 
        test: /\.js$/, 
      }, 
      { 
        loader: ExtractTextPlugin.extract({ loader: 'css-loader' }), 
        test: /\.css$/ 
      }, 
      { 
        test: /\.(jpe?g|png|gif|svg)$/, 
        use: [ 
          { loader: 'url-loader', options: { limit: 40000 } }, 
          'image-webpack-loader' 
        ] 
      } 
    ] 
  }, 
  plugins: [ 
    new ExtractTextPlugin('style.css') 
  ] 
}; 
module.exports = config;

做完这些修改后，重新运行webpack命令，图片应该就能正常被打包处理了。

内容的提问来源于stack exchange，提问作者Ankit Parmar