file-loader for webpack is not moving the src folder image files to dist folder

Question

{
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader?name=img/img-[hash:6].[ext]',
      },

I added this config intowebpack.config.js to utilize file-loader by add above rule into

module: {
    rules: [

section, but none of the image files have moved to dist/ folder, even if I put the image file into src/images/. Is there something I missed need to add to the webpack config?

I am following the example from https://julienrenaux.fr/2015/03/30/introduction-to-webpack-with-practical-examples/

By the way, I am using webpack 2... are there different way to config file-loader now?

Here is the whole webpack config file

const { resolve } = require('path');

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');

const config = {
  devtool: 'cheap-module-eval-source-map',

  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './main.js',
    './assets/scss/main.scss',
  ],

  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/',
  },

  context: resolve(__dirname, 'app'),

  devServer: {
    hot: true,
    contentBase: resolve(__dirname, 'dist'),
    publicPath: '/',
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        loaders: [
          'babel-loader',
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            'css-loader',
            {
              loader: 'sass-loader',
              query: {
                sourceMap: false,
              },
            },
          ],
        }),
      },
      { test: /\.(png|jpg)$/, use: 'url-loader?limit=15000' },
      { test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: 'file-loader' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml' },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'file-loader?name=img/img-[hash:6].[ext]',
      },
    ],
  },

  plugins: [
    new ExtractTextPlugin({ filename: 'style.css', disable: false, allChunks: true }),
    new CopyWebpackPlugin([{ from: 'vendors', to: 'vendors' }]),
    new OpenBrowserPlugin({ url: 'http://localhost:8080' }),
    new webpack.HotModuleReplacementPlugin(),
  ],
};

module.exports = config;

Answer 1

Use following snippet to require all files under src/images/ (or wherever your images are located) inside main.js:

// load assets
function requireAll(r) { r.keys().forEach(r); }
requireAll(require.context('src/images/', true));

This will make Webpack to process all the files that are located inside this folder.

Answer 2

It says in the example you're following:

You now can require any image file using require('./src/image_big.jpg');

If you don't import the images somewhere, webpack won't copy them, because it only applies the file-loader to the imports it sees and match your rule. You can also import them in Sass with url for example:

background-image: url('./src/image.jpg');

You also have two rules for .png and .jpg:

{ test: /\.(png|jpg)$/, use: 'url-loader?limit=15000' },
{
  test: /\.(png|jpg|gif)$/,
  loader: 'file-loader?name=img/img-[hash:6].[ext]',
},

Pick one of them. Because now it will apply both, but only one of them is really used, so you end up with two images when the image is bigger than 15kb because url-loader will fall back to file-loader when the file is bigger than the configured limit.

Answer 3

Reference: https://angular.io/docs/ts/latest/guide/webpack.html

I recommend trying the guide referenced above. Just note that you need to run the following to get it to all to work:

npm install --save-dev karma-jasmine-html-reporter

In regard to your question, the image in the above example guide is referenced via an <img> tag via an html file. This <img> reference is picked up by webpack and the image file is placed in an assets directory that has been created in the output "dist/" folder:

"app.component.html":

<main>
    <h1>Hello from Angular App with Webpack</h1>
    <img src="../assets/images/angular.png">
</main>

This is their webpack configuration file with their loaders:

"webpack.conf.js":

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts'
    },

    resolve: {
        extensions: ['.ts', '.js']
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                loaders: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('src', 'tsconfig.json') }
                    } , 'angular2-template-loader'
                ]
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file-loader?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                exclude: helpers.root('src', 'app'),
                loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' })
            },
            {
                test: /\.css$/,
                include: helpers.root('src', 'app'),
                loader: 'raw-loader'
            }
        ]
    },

    plugins: [
        // Workaround for angular/angular#11580
        new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
            /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'src/index.html'
        })
    ]
};