final.webpack.config.js

const path = require('path');
const webpack = require('webpack');
const NameAllModulesPlugin = require('name-all-modules-plugin');

module.exports = {
    entry: {
        main: './src/foo',
        other: './src/foo-two',
        vendor: ['preact']
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
    },
    externals: {
        jquery: 'jQuery'
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.NamedChunksPlugin((chunk) => {
            if (chunk.name) {
                return chunk.name;
            }
            return chunk.modules.map(m => path.relative(m.context, m.request)).join("_");
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: Infinity
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'runtime'
        }),
        new NameAllModulesPlugin(),
    ]
}

chunk.modules is deprecated.

I think we can use chunk.mapModules instead.

e.g.

new webpack.NamedChunksPlugin((chunk) => {
    if (chunk.name) {
        return chunk.name;
    }
    return chunk.mapModules(m => path.relative(m.context, m.request)).join('_');
})

path.relative(m.context, m.request) alone won't convert m.request to relative path since loaders use abs path, e.g. /abs path/to-string!/abs path/css-loader .

We may need to split and convert them to relative path too.

e.g.

new webpack.NamedChunksPlugin((chunk) => {
    if (chunk.name) {
        return chunk.name;
    }
    return md5(chunk.mapModules(m => {
        let request = (
            m.request
            .split('!')
            .map((r) => path.relative(m.context, r))
            .join('!')
        );
        return path.relative(m.context, request)
    }).join('_'));
})