Skip to content

A webpack plugin that allows you to share common chunks between different webpack builds

License

Notifications You must be signed in to change notification settings

mmmeff/content-hashed-module-ids-webpack-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

content-hashed-module-ids-webpack-plugin

npm

This plugin generates module ID from unique hashes based on the file contents of the module. Unlike Webpack's HashedModuleIdsPlugin, which generates hashes from the relative import path of the module.

You can use this plugin to guarantee that multiple webpack bundles on a page do not clash their module IDs and overwrite modules when loading chunk assets. This is pivotal to achieving long-term caching across disparate builds.

Furthermore, this plugin gives you the ability to share chunks between multiple webpack bundles on a page so long as they use the same versions, and when they do not, the page will load both and continue working as expected.

Install

npm i -D content-hashed-module-ids-webpack-plugin

Configuration

This plugin takes the same options used by Webpack's HashedModuleIdsPlugin.

Plugin usage

webpack.config.js

const ContentHashedModuleIdsPlugin = require('content-hashed-module-ids-webpack-plugin');

module.exports = {
    // ...
    plugins: [
        new ContentHashedModuleIdsPlugin({
            // HashedModuleIdsPlugin options
        })
    ]
    // ...
}

Recommended configuration for long-term caching and multi-bundle chunk-sharing

This configuration is heavily based on the article The 100% correct way to split your chunks with webpack.

const ContentHashedModuleIdsPlugin = require('content-hashed-module-ids-webpack-plugin');

const isDev = process.env.NODE_ENV !== 'production';

module.exports = {
    context: __dirname,
    entry: path.resolve(__dirname, './index.js'),
    output: {
        filename: '[name].[chunkhash].js',
        path: path.join(__dirname, './dist'),
        publicPath: './static/',
        library: 'SharedChunkBundles' // Groups all similarly built packages into the same library
    },
    plugins: [
        new ContentHashedModuleIdsPlugin() // Guarantees that all moduleIds under the SharedChunkBundles library are unique
    ],
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                vendors: {
                    // splits out all node_modules into chunks by name
                    test: /[\\/]node_modules[\\/]/,
                    name: (module) => {
                        const pName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                        return `npm.${pName.replace('@', '')}`;
                    }
                }
            }
        }
    },
    mode: isDev ? 'development' : 'production',
    devtool: isDev ? 'eval' : undefined,
}

License

MIT

About

A webpack plugin that allows you to share common chunks between different webpack builds

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published