的WebPack 1.12.13無法解析 '文件' 或 '目錄' ./img/readme2.png

Question

我使用的WebPack 1.12.13和的WebPack產生錯誤：

ERROR在./~/css-loader!./ src/styles/oil.css 未找到模塊：錯誤：無法解析C：\ react_oil \ src \ styles中的'file'或'directory'./img/close.png風格 @ ./〜/ css-loader !. /src/styles/oil.css 6：15780-15806

錯誤在./~/css-loader!./src/styles/oil.css中 模塊未找到：錯誤：無法解析'文件'或'目錄'./img/use.png在C：\ react_oil \ src \ styles中 @ ./~/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 

Answer 1

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