webpack 1.12.13 无法解析“文件”或“目录”./img/readme2.png答案

【问题标题】：webpack 1.12.13 Cannot resolve 'file' or 'directory' ./img/readme2.pngwebpack 1.12.13 无法解析“文件”或“目录”./img/readme2.png
【发布时间】：2017-06-24 18:23:40
【问题描述】：

我使用 webpack 1.12.13 并且 webpack 产生错误：

./~/css-loader!./src/styles/oil.css 中的错误未找到模块：错误：无法解析 C:\react_oil\src\styles 中的“文件”或“目录”./img/close.png @ ./~/css-loader!./src/styles/oil.css 6:15780-15806

./~/css-loader!./src/styles/oil.css 中的错误未找到模块：错误：无法解析 C:\react_oil\src\styles 中的“文件”或“目录”./img/use.png @ ./~/css-loader!./src/styles/oil.css 6:17678-17702

错误可能是什么？

webpack 配置：

var path = require('path')
var webpack = require('webpack')
var NpmInstallPlugin = require('npm-install-webpack-plugin')
var autoprefixer = require('autoprefixer');
var precss = require('precss');
var ExtractTextPlugin = require ('extract-text-webpack-plugin');

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    'babel-polyfill',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new NpmInstallPlugin(),
    new ExtractTextPlugin('bundle.css')
  ],
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        loaders: ['eslint'],
        include: [
          path.resolve(__dirname, "src"),
        ],
      }
    ],
    loaders: [
      {
        loaders: ['react-hot', 'babel-loader'],
        include: [
          path.resolve(__dirname, "src"),
        ],
        test: /\.js$/,
        plugins: ['transform-runtime'],
      },
      {
        test:   /\.css$/,
        //loader: "style-loader!css-loader!postcss-loader"
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader')
      },
      { 
            test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, 
            include: /\/node_modules\//,
            loader: "file?name=[1].[ext]&regExp=node_modules/(.*)"
      },
      { 
            test: /\.(png|jpg|svg|ttf|eot|woff|woff2)$/, 
            exclude: /\/node_modules\//,
            loader: "file?name=[path][name].[ext]"
      }
    ]
  },
  postcss: function () {
    return [autoprefixer, precss];
  }
}

文件夹结构：

node_modules
src
 |--styles
      |--oil.css
 |--img
      |--image files
webpack.config.js

【问题讨论】：

标签： webpack webpack-style-loader

【解决方案1】：

test:/\.(png|svg|jpeg|ttf)$/,
            use:[{
            loader:require.resolve("file-loader") + "?name=../[path][name].[ext]"

【讨论】：

正确答案 AFAICS，但你能解释一下这是做什么的吗？

【解决方案2】：

对于 webpack 4，现在必须在加载器规则中添加整个“文件加载器”，而不仅仅是“文件”。但我看到你的是 webpack 1.x。最好把你的 js 代码也放在这里。除此之外，尝试在 js 中导入您的 img，然后在其中设置 img 元素。面临类似的问题并为我工作，在 webpack 加载器中只有“文件加载器”。

类似这样的：从'./xxx.png'导入图标；

内部脚本： document.getElementById('imgtag-id').src = icon;

【讨论】：