0

I use webpack 1.12.13 and webpack produces errors:

ERROR in ./~/css-loader!./src/styles/oil.css Module not found: Error: Cannot resolve 'file' or 'directory' ./img/close.png in C:\react_oil\src\styles @ ./~/css-loader!./src/styles/oil.css 6:15780-15806

ERROR in ./~/css-loader!./src/styles/oil.css Module not found: Error: Cannot resolve 'file' or 'directory' ./img/use.png in C:\react_oil\src\styles @ ./~/css-loader!./src/styles/oil.css 6:17678-17702

The error may be what?

webpack config:

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];
  }
}

folder structure:

node_modules
src
 |--styles
      |--oil.css
 |--img
      |--image files
webpack.config.js
alexandr2006
  • 19
  • 3

2 Answers2

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

In case of webpack 4, it is now mandatory to add entire 'file-loader' in loader rule, not just 'file'. But I see yours is webpack 1.x. Better put your js code as well here. Aside that, try importing your img in the js and then setting the img element's there. Was facing similar problem and worked for me, with only 'file-loader' in webpack loaders.

Something like this: import icon from './xxx.png';

inside script: document.getElementById('imgtag-id').src = icon;

Saloni Yadav
  • 9
  • 3