title: webpack2 'Can't resolve assets/img/coin.png' in 'project'
body: <p>I'm trying to import an image dynamically with a require statement, but even before that, regular imports like so don't work:</p>
  
  <p><code>import 'assets/img/coin.png'</code></p>
  
  <p>The actual use case is:</p>
  
  <p><code>require(</code>assets/img/${source}.${ext}/<code>);</code></p>
  
  <p><strong>errors from the <code>import</code></strong></p>
  
  <pre><code>ERROR in ./app/components/Img/index.js
  Module not found: Error: Can't resolve 'assets/img/coin.png' in '/Users/rublev/dev/company/support/app/components/Img'
   @ ./app/components/Img/index.js 36:0-33
   @ ./app/components/SectionList/index.js
   @ ./app/pages/Support/index.js
   @ ./app/views.js
   @ ./app/app.js
   @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server webpack-dev-server/client?http://localhost:8080 webpack/hot/only-dev-server ./app/app.js
  </code></pre>
  
  <p><strong>dir structure</strong></p>
  
  <pre><code>.
  ├── app
  │   ├── app.js
  │   ├── assets
  │   │   ├── img        &lt;- where i want to import images from
  │   ├── components
  │   │   ├── Footer
  │   │   ├── Img        &lt;- component im importing images into
  │   │   ├── List
  │   │   ├── Loader
  │   │   ├── Nav
  │   │   ├── Searchbar
  │   │   ├── SectionList
  │   │   └── Vote
  │   ├── containers
  │   │   └── App
  │   ├── index.html
  │   ├── pages
  │   │   ├── Article
  │   │   ├── Section
  │   │   └── Support
  │   ├── reducers.js
  │   ├── router.js
  │   ├── store.js
  │   └── views.js
  ├── config
  │   ├── webpack.config.base.babel.js
  │   ├── webpack.config.development.babel.js
  │   └── webpack.config.production.babel.js
  ├── package.json
  └── yarn.lock
  </code></pre>
  
  <p><strong>webpack.config.base.babel.js</strong></p>
  
  <pre><code>import webpack, { IgnorePlugin } from 'webpack';
  import HtmlWebpackPlugin from 'html-webpack-plugin';
  import { resolve, join } from 'path';
  
  // dotenv
  const Dotenv = require('dotenv-webpack');
  
  const NODE_ENV = process.env.NODE_ENV;
  
  const env = {
      production: NODE_ENV === 'production',
      staging: NODE_ENV === 'staging',
      test: NODE_ENV === 'test',
      development: NODE_ENV === 'development' || typeof NODE_ENV === 'undefined'
  };
  
  Object.assign(env, {
      build: (env.production || env.staging)
  });
  
  export default {
      output: {
          path: join(process.cwd(), '/dist'),
          publicPath: '/',
          filename: 'bundle.js'
      },
      resolve: {
          modules: [
              'node_modules',
              'app',
              join(__dirname, '')
          ],
          extensions: ['.html', '.json', '.scss', '.js', '.jsx'],
          alias: {
              normalize: join(process.cwd(), '/node_modules/normalize-css/normalize.css')
          }
      },
      module: {
          noParse: /\.min\.js/,
          rules: [
              {
                  test: /\.json($|\?)/,
                  use: 'json-loader',
                  enforce: 'pre'
              },
              {
                  test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
                  use: 'url-loader?prefix=font/&amp;limit=10000'
              },
              {
                  test: /\.(jpe?g|png|gif|svg)$/i,
                  use: 'file-loader',
                  options: {
                      context: '/',
                      name: '[name].[ext]'
                  },
              }
          ]
      },
      plugins: ([
          new HtmlWebpackPlugin({
              title: 'company',
              template: join(process.cwd(), '/app/index.html')
          }),
          new Dotenv(),
          new webpack.DefinePlugin({
              __DEV__: env.development,
              __STAGING__: env.staging,
              __PRODUCTION__: env.production,
              __CURRENT_ENV__: '\'' + (NODE_ENV) + '\''
          })
      ]),
      devServer: {}
  };
  </code></pre>
  
  <p><strong>webpack.config.development.babel.js</strong></p>
  
  <pre><code>import webpack, { IgnorePlugin } from 'webpack';
  import HtmlWebpackPlugin from 'html-webpack-plugin';
  import { resolve, join } from 'path';
  
  import config from './webpack.config.base.babel.js';
  
  if (process.env.NODE_ENV !== 'test') {
      config.entry = [
          'webpack-dev-server/client?http://localhost:8080',
          'webpack/hot/only-dev-server',
          join(process.cwd(), '/app/') + 'app.js'
      ];
  }
  
  config.devtool = '#source-map';
  
  config.module.rules = config.module.rules.concat([
      {
          enforce: 'pre',
          test: /\.jsx?$/,
          exclude: resolve(__dirname, 'app', 'node_modules'),
          use: 'source-map-loader'
      },
      {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: 'babel-loader'
      },
      {
          test: /\.css?$/,
          use: [
              'style-loader',
              'css-loader'
          ]
      },
      {
          test: /\.(sass|scss)$/,
          use: [
              'style-loader',
              'css-loader',
              'sass-loader'
          ]
      }
  ]);
  
  config.devServer = {
      contentBase: './dist',
      host: '0.0.0.0',
      port: 8080,
      stats: {
          version: false,
          chunks: false,
          assets: true,
          colors: true,
          children: true
      }
  };
  
  export default config;
  </code></pre>