Emit a new chunk for the file

[Jmeyering]

It looks like the file-loader does not emit a new chunk for the generated file.

This breaks some compatibility with plugins that perform actions on specific chunks. Specifically the html-webpack-plugin.

[iamsisar]

+1

[alexander-akait]

@Jmeyering @iamsisar Can your explain what your need more detail? Provide example where file-loader doesn't work as expected?

[JacobJohansen]

@evilebottnawi this is my issue that cause me to stumble upon this jantimon/html-webpack-plugin#296

[michael-ciniawsky]

@JacobJohansen jantimon/html-webpack-plugin#296 the config there is just wrong, please show your webpack.config.js

[JacobJohansen]

const path = require('path');
const webpack = require('webpack');
const bourbon = require('node-bourbon').includePaths;
const HtmlWebpackPlugin = require('html-webpack-plugin');

var distPath = path.resolve('dist/');

var commonsPlugin = new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor.bundle.[hash].js'
});

module.exports = {
    entry: {
        home: './app/app',
        authSetup: './app/authSetup.js'
    },
    output: {
        path: distPath,
        publicPath: '/',
        filename: "[name].[hash].js"
    },

    devServer: {
        contentBase: 'public'
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    { loader: 'ng-annotate-loader' }
                ]
            }, {
                test: /\.scss$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            context: 'app',
                            name: "[path][name].[hash].css"
                        }
                    },
                    {
                        loader: "extract-loader"
                    },
                    { loader: "css-loader", options: {
                        url: false
                    }},
                    { loader: "sass-loader?includePaths[]=" + bourbon }
                ]
            }, {
                test: /\.html$/,
                exclude: /app\/([^\/]+\.html)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            context: 'app',
                            name: "[path][name].[hash].[ext]"
                        }
                    },{
                        loader: "extract-loader"
                    }, {
                        loader: "html-loader",
                        options: {
                            attrs: false
                        }
                    }
                ]
            }, {
                test: /\.json$/,
                exclude: /node_module/,
                use: [
                     {
                        loader: "file-loader",
                        options: {
                            context: 'app',
                            name: "[path][name].[hash].[ext]"
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        commonsPlugin
        // , new webpack.optimize.UglifyJsPlugin({ mangle: false })
        , new HtmlWebpackPlugin({
            inject: true,
            template: './app/webpackIndex.html'
        })
    ],
    resolveLoader: {
        modules: [
            path.resolve('node_modules/')
        ]
    }
};

[michael-ciniawsky]

@JacobJohansen The html-webpack-plugin doesn't pick up files extracted with extract-loader, use the extract-text-webpack-plugin instead