webpack-manifest-plugin: Breaks when chunk has multiple files with the same extension

I encountered this problem today and worked around it by simply removing the hash in the file name using map. My case was slightly different to this but I’ve modified my solution to this use case and hopefully the below will help.

Hopefully for you this will work:

new ManifestPlugin({
    map: function(file) { 
        file.name = file.path.replace(`-${file.chunk.hash}`, '');
        return file; 
    },
}),

However the hash we are using may be the same for all files with the same entry (a problem I had). If so you could do a messier version:

new ManifestPlugin({
    map: function(file) { 
        file.name = file.path.replace(/-[a-z0-9].+\.(css|js)/i, '.$1');
        return file; 
    },
}),

Neither of these are tested, but maybe they will help you get a workaround in place 😄

+1

Hi. This is our project setup.

Setup

• TypeScript 2.4.1
• Webpack 3.1
• webpack-manifest-plugin 1.1.2
• extract-text-webpack-plugin 2.1.2

// main.ts
import '../scss/foo.critical.scss';
import '../scss/foo.main.scss';

// webpack.conf.js (simple)
{
  module: {
    rules: [
      {
        test: /\.main\.scss$/,
        use: ExtractTextPluginMainCss
      },
      {
        test: /\.critical\.scss$/,
        use: ExtractTextPluginCriticalCss
      }
    ]
  },
  plugins: [
    new ManifestPlugin()
  ]
}

Expected manifest.json output

{
  "foo.main.css": "foo.main.$hash.css",
  "foo.critical.css": "foo.critical.$hash.css"
}

Actual manifest.json output

{
  "foo.main.css": "foo.main.$hash.css"
}

Sure! So this is our setup:

• Webpack 3.6.0
• webpack-manifest-plugin 1.3.2
• extract-text-webpack-plugin 3.0.2

// entry.js
import 'style/tzcontrol.less';
import 'style/tzcontrol.scss';
import 'style/tz-appshell.less';

// webpack.conf
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

const extractSass = new ExtractTextPlugin(`[name]-[contenthash]-new.css`);
const extractLess = new ExtractTextPlugin(`[name]-[contenthash].css`);
const extractShell = new ExtractTextPlugin(`[name]-[contenthash]-shell.css`);

config.module.rules = [
    {
        test: /\.scss$/,
        include: [
            path.resolve(__dirname, 'src/style'),
        ],
        loader: extractSass.extract({
            use: ['css-loader', 'sass-loader'],
            fallback: 'style-loader',
            publicPath: './',
        }),
    },
    {
        test: /\.less$/,
        include: [
            path.resolve(__dirname, 'src/style'),
        ],
        exclude: [
            path.resolve(__dirname, 'src/style/tz-appshell.less'),
        ],
        loader: extractLess.extract({
            use: ['css-loader', 'less-loader'],
            fallback: 'style-loader',
            publicPath: './',
        }),
    },
    {
        test: /\.less$/,
        include: [
            path.resolve(__dirname, 'src/style/tz-appshell.less'),
        ],
        loader: extractShell.extract({
            use: ['css-loader', 'less-loader'],
            fallback: 'style-loader',
            publicPath: './',
        }),
    },
];

config.plugins = [
    extractLess,
    extractSass,
    extractShell,
    new ManifestPlugin({
      map: function(file) { 
         file.name = path.join(path.dirname(file.path), file.name); 
         return file; 
       } 
    }),
];

Expected manifest.json output

{
  ...
  "app.css": "app-c5d773788e95ba4c03ea1c1e306fef61.css",
  "app-new.css": "app-c06bf711eecbd8785ddf0737986d8343daad8681-new.css",
  "app-shell.css": "app-54e823c0625da14e976b6d1cef1a36a971527a1a-shell.css",
  ...
}

Actual manifest.json output

{
  ...
  "/assets/app.css": "/assets/app-c5d773788e95ba4c03ea1c1e306fef61.css",
  ...
}