Skip to content

Instantly share code, notes, and snippets.

@davidgilbertson
Last active November 10, 2022 03:45
Show Gist options
  • Save davidgilbertson/838312f0a948423e4c4da30e29600b16 to your computer and use it in GitHub Desktop.
Save davidgilbertson/838312f0a948423e4c4da30e29600b16 to your computer and use it in GitHub Desktop.
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, 'src/index.js'),
plugins: [
new webpack.HashedModuleIdsPlugin(), // so that file hashes don't change unexpectedly
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash].js',
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`;
},
},
},
},
},
};
@sai-chai
Copy link

sai-chai commented Nov 9, 2019

I think that name function might cause filename collisions if you have multiple packages from the same scope. Use this regex instead:
/[\\/]node_modules[\\/](?:(@[\w-]*?[\\/].*?|.*?)([\\/]|$))/
You'll also have to replace slashes/backslashes, ofc

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment