Use with extract-text-plugin duplicate chunks name

[guillaumemaka]

Hi @nickjj ,

I try to use the extract-text-plugin with your but I notice that your plugin map ell entry point to its generated asset.

Given this generated assets

                                                                                     Asset       Size  Chunks             Chunk Names
_/node_modules/font-awesome/fonts/fontawesome-webfont.25a32416abee198dd821b0b17a198a8f.eot    76.5 kB          [emitted]
_/node_modules/font-awesome/fonts/fontawesome-webfont.1dc35d25e61d819a9c357074014867ab.ttf     153 kB          [emitted]
_/node_modules/font-awesome/fonts/fontawesome-webfont.46661d6d65debc63884004fed6e37e5c.svg   41 bytes          [emitted]
                                                           app_css.3d9d59f84ac67ab679a1.js  234 bytes       0  [emitted]  app_css
                                                            app_js.dfd0ad047c0485e431d4.js  785 bytes       1  [emitted]  app_js
                                                    profile.module.52093718023ca4c7718f.js     902 kB       2  [emitted]  profile.module
                                                                              vendor_js.js     614 kB       3  [emitted]  vendor_js
                                                          app_css.3d9d59f84ac67ab679a1.css     112 kB       0  [emitted]  app_css
                                                   profile.module.52093718023ca4c7718f.css    4.97 kB       2  [emitted]  profile.module

Notice I got 2 app_css and profile.module chunks name (a js and css file)

I get this manifest.json

    "assets": {
        "app_css.css": "app_css.3d9d59f84ac67ab679a1.css",
        "app_js.js": "app_js.dfd0ad047c0485e431d4.js",
        "profile.module.css": "profile.module.52093718023ca4c7718f.css",
        "vendor_js.js": "vendor_js.js"
    },
    "publicPath": "http://localhost:2992/assets/"
}

And I want to get this:

    "assets": {
        "app_css.js": "app_css.3d9d59f84ac67ab679a1.js",
        "app_css.css": "app_css.3d9d59f84ac67ab679a1.css",
        "app_js.js": "app_js.dfd0ad047c0485e431d4.js",
        "profile.module.css": "profile.module.52093718023ca4c7718f.css",
        "profile.module.js": "profile.module.52093718023ca4c7718f.js",
        "vendor_js.js": "vendor_js.js"
    },
    "publicPath": "http://localhost:2992/assets/"
}

Any idea how I can do that ?

My webpack.config.js

var path = require('path');
var glob = require('glob');
var _ = require('lodash');

// Webpack and third party plugins.
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var AutoPrefixerPlugin = require('autoprefixer-core');
var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');

// Environment detection.
var node_env = process.env.NODE_ENV || 'development';

/*
 Configuration settings
 ------------------------------------------------------------------------------
 */

var context = __dirname;

// Where are your source assets located?
var rootAssetPath = 'assets';
var contextRoot = path.join(context, rootAssetPath);

// Where will the files get built to?
var buildOutputPath = './build/public';

// How should certain asset types be configured?
var assets = {
    fonts: {
        path: 'fonts',
        filename: '[path][name].[hash].[ext]'
    },
    images: {
        path: 'images',
        filename: '[path][name].[hash].[ext]'
    },
    scripts: {
        path: 'scripts',
        filename: '[name].[chunkhash].js',
        chunkFilename: '[id].[chunkhash].js'
    },
    styles: {
        path: 'styles',
        filename: '[name].[chunkhash].css'
    }
};

// Which top level JS and CSS files should get output?
var chunks = {
    app_js: [
        path.join(contextRoot, assets.scripts.path, 'entry.js')
    ],
    app_css: [
        path.join(contextRoot, assets.styles.path, 'default.scss')
    ],
    vendor_js: [
        'bootstrap',
        'moment',
        'tether',
        'font-awesome-loader'
    ]
};


// Add all React components as entry point
// Ex: /path/to/assets/scripts/modules/user/profile.module.js
// {'profile.module': [/path/to/assets/scripts/modules/user/profile.module.js]}
var files = glob.sync('**/*.module.js', {root: path.join(contextRoot, assets.scripts.path, 'modules')})

var components = _.map(files, function(file){
    var k = path.basename(file).split('.js')[0];
    var componentPath = file;
    var entry = {};
    entry[k] = [path.join(context, componentPath)];
    return entry;
    // return path.join(context, componentPath);
});

// Merge existing entrypoint
// ex: {
//     app_js: ['/path/to/assets/scripts/entry.js'],
//     app_css: ['/path/to/assets/styles/default.scss'],
//     vendor_js: ['bootstrap', 'moment', 'tether', 'font-awesome-loader'],
//     'profile.module': ['/path/to/assets/scripts/modules/user/profile.module.js']
// }
_.forEach(components, function(component){
    _.merge(chunks, component);
});

// Avoid parsing this code to speed up rebuilds.
var noParse = [
    path.join(contextRoot, assets.scripts.path, 'vendor'),
    path.join(contextRoot, assets.styles.path, 'vendor')
];

// Where will assets get served in development mode? This depends on running
// the webpack dev server.
var publicPath = process.env.PUBLIC_PATH || 'http://localhost:2992/assets/';


// Plugins that will load in all environments.
var plugins = [
    new CleanWebpackPlugin(['build'], {
      root: context,
      verbose: true,
      dry: false
    }),
    // http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
    new webpack.NoErrorsPlugin(),

    // http://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
    new webpack.optimize.CommonsChunkPlugin('vendor_js', 'vendor_js.js'),

    // https://github.com/webpack/extract-text-webpack-plugin
    new ExtractTextPlugin('styles.bundle.css'),

    // http://webpack.github.io/docs/list-of-plugins.html#contextreplacementplugin
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, languages),

    // http://webpack.github.io/docs/list-of-plugins.html#provideplugin
    new webpack.ProvidePlugin({
      "window.Tether": "tether"
    }),

    // https://github.com/nickjj/manifest-revision-webpack-plugin
    new ManifestRevisionPlugin(path.join('build', 'manifest.json'), {
        rootAssetPath: rootAssetPath,
        ignorePaths: ['/fonts', '/styles', '/scripts']
    })
];

// Development environment only plugins.
if (node_env !== 'development') {
    var developmentPlugins = [
        // http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
        new webpack.optimize.UglifyJsPlugin({compressor: {warnings: false}}),

        // http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
        new webpack.optimize.DedupePlugin()
    ];

    plugins.push(developmentPlugins[0])
}

module.exports = {
    context: path.join(__dirname),
    entry: chunks,
    output: {
        path: buildOutputPath,
        publicPath: publicPath,
        filename: assets.scripts.filename,
        chunkFilename: assets.scripts.chunkFilename
    },
    externals: {
        'jquery': 'jQuery'
        // 'react': 'React',
        // 'react-dom': 'ReactDOM'
    },
    resolve: {
        // Allow requiring files without supplying the extension.
        extensions: ['', '.js', '.scss']
    },
    module: {
        noParse: noParse,
        loaders: [
            {
                test: /\.jsx?$/i, loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets:['react', 'es2015', 'stage-1']
                }
            },
            {
                test: /\.s?css$/i,
                loader: //'style-loader!css-loader!postcss-loader!sass-loader'
                    ExtractTextPlugin.extract('style-loader',
                    'css-loader!postcss-loader!sass-loader')
            },
            {
                test: /\.(jpe?g|png|gif|svg([\?]?.*))$/i,
                loaders: [
                    'file?context=' + rootAssetPath + '&name=' + assets.images.filename,
                    'image?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {
                test: /\.(woff([\?]?.*)|woff2([\?]?.*))$/i,
                loader: 'url-loader?limit=100000'
            },
            {
                test: /\.(ttf([\?]?.*)|eot([\?]?.*))$/i,
                loader: 'file-loader?context=' + rootAssetPath + '&name=' + assets.fonts.filename
            }
        ]
    },
    plugins: plugins,
    postcss: [AutoPrefixerPlugin()],
    sassLoader: {
        includePaths : [
            path.join(contextRoot, assets.styles.path),
            path.join(contextRoot, assets.styles.path, 'vendor', 'bootstrap')
        ]
    }
};