assets-webpack-plugin: Backward incompatible change on the generated file in 3.9.0-3.9.1

I am using webpack 3.5, and was used to have a assets.json that look like this:

{
  asset_1: {
    js: "asset_1-hash.js",
    css: "asset_1-hash.css"
  },
   ...
  commons: {
    js: "commons-hash.js",
    css: "commons-hash.css",
  },
}

And now it looks like this

{
  asset_1: {
  js: [
    "commons-hash.js",
    "asset_1-hash.js"
  ],
  css: [
    "commons-hash.css",
    "asset_1-hash.css"
  ]
  },
}

Which is kind of a huge incompatible change. And I don’t see any info about this, nor warnings.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 8
Comments: 15 (7 by maintainers)

Most upvoted comments

@ztoben With 3.9.2 the situation is back to normal, Here is a redacted version of my webpack config:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');
const AssetsPlugin = require('assets-webpack-plugin');


module.exports = {
    context: __dirname,
    entry: {
        entry_1: ['babel-polyfill', './frontend/entry_1/static/js/index.js'],
        entry_2: ['babel-polyfill', './frontend/entry_2/static/js/index.js'],
    },
    output: {
        path: path.join(__dirname, './bundles'),
        filename: '[name]-[hash].js',
        chunkFilename: '[id].js',
        libraryTarget: 'var',
        library: 'EntryPoint_[name]',
        sourceMapFilename: '[file].map',
    },
    plugins: [
        new AssetsPlugin({
            path: path.join(__dirname, './bundles'),
            useCompilerPath: false,
        }),
        new webpack.ExtendedAPIPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Cookies: 'js-cookie',
            _: 'underscore',
            i18n: 'i18next',
        }),
        new CircularDependencyPlugin({
            exclude: /node_modules/,
            failOnError: true,
        }),
    ],
    module: {
        rules: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: 'css-loader',
            }),
        }, {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract({
                use: [{
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                    },
                }, {
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true,
                    },
                }],
                fallback: 'style-loader',
            }),
        }, {
            test: /\.js$/,
            use: 'babel-loader',
            exclude: /node_modules/,
        }, {
            test: /\.png$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                },
            },
        }, {
            test: /\.jpg$/,
            use: ['file-loader'],
        }, {
            test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                    mimetype: 'application/font-woff',
                },
            },
        }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                    mimetype: 'octet-stream',
                },
            },
        }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            use: 'file-loader',
        },
        {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000,
                    mimetype: 'image/svg+xml',
                },
            },
        }],
    },
    stats: {
        children: false,
    },
};

loispostula on Aug 9, 2018

Yes due to #109 for sure. In Webpack 4, you can let it split the entry js as it sees fit, and that automatically creates a commons chunk. Easy to use, just map across the js array, creating script tags.

I think the new behavior will have to be behind a flag. I’m not sure why the named commons chunk isn’t showing up either, I would expect it to be listed too.

wmertens on Aug 7, 2018

@ztoben: Here’s a snapshot of a Webpack config that illustrated the problem: https://github.com/mapbox/batfish/blob/503064de33ebffa407bbdf5d20e44a8c71964ccd/test/__snapshots__/create-webpack-config-client.test.js.snap#L109-L231

davidtheclark on Aug 7, 2018

I’m having the same problem, and can confirm that 3.8.4 works the same as before but 3.9.0+ breaks the output. So I’d definitely consider this a bug, not an enhancement.

davidtheclark on Aug 7, 2018