Plugin to replace webpack chunkhash with an md5 hash of the final file conent.
Home Page: https://www.npmjs.com/package/webpack-plugin-hash-output
License: ISC License
The fix for #15 likely introduced an infinite loop. Builds froze with:
93% after asset optimization Update chunks
I get this error as soon as I added new HashOutput() to my list of plugins:
Unhandled rejection RangeError: Maximum call stack size exceeded
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:40)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:112:12)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:112:12)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:112:12)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:112:12)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:112:12)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:112:12)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:112:12)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:112:12)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:112:12)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:112:12)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
at chunkGroup.getParents.map.parentGroup (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:112:12)
at Array.map (<anonymous>)
at getAllParents (/home/me/Projects/myproject/node_modules/webpack-plugin-hash-output/src/OutputHash.js:110:36)
My 'compiled' webpack.config looks like this, if you need to see it:
{ target: 'web',
context: '/home/me/Projects/myproject',
mode: 'production',
entry:
{ main:
[ '/home/me/Projects/myproject/assets/scripts/lib/autofocus-polyfill',
'/home/me/Projects/myproject/assets/scripts/lib/matches-polyfill',
'whatwg-fetch',
'core-js/es6',
'core-js/stage/4',
'/home/me/Projects/myproject/assets/main' ],
print:
[ '/home/me/Projects/myproject/assets/stylesheets/print' ] },
output:
{ path: '/home/me/Projects/myproject/www/assets',
pathinfo: false,
publicPath: '/assets/',
crossOriginLoading: 'anonymous',
filename: '[name].[chunkhash].js',
chunkFilename: 'chunk.[chunkhash].js' },
resolve:
{ modules:
[ '/home/me/Projects/myproject/assets',
'/home/me/Projects/myproject/node_modules/',
'/home/me/Projects/myproject/vendor/' ],
alias:
{ 'jquery-ui/ui/widget': '/home/me/Projects/myproject/node_modules/jquery-ui/widget.js' },
extensions: [ '.jsx', '.js', '.less', '.css' ] },
node: { __filename: true, __dirname: true, fs: 'empty' },
amd: { jQuery: true },
module:
{ rules:
[ { enforce: 'pre',
test: /\.jsx?$/,
loader: 'eslint-loader',
include: '/home/me/Projects/myproject/assets',
options: { cache: false, quiet: true, failOnError: true } },
{ test: /\.jsx?$/,
loader: 'strip-loader',
options:
{ strip:
[ 'console.assert',
'console.count',
'console.dir',
'console.dirxml',
'console.group',
'console.groupCollapsed',
'console.groupEnd',
'console.info',
'console.log',
'console.profile',
'console.profileEnd',
'console.table',
'console.time',
'console.timeEnd',
'console.timeStamp' ] } },
{ test: /\.less$/,
use:
[ '/home/me/Projects/myproject/node_modules/mini-css-extract-plugin/dist/loader.js',
{ loader: 'css-loader', options: [Object] },
{ loader: 'postcss-loader', options: [Object] },
{ loader: 'less-loader', options: [Object] } ] },
{ test: /\.css$/,
use:
[ '/home/me/Projects/myproject/node_modules/mini-css-extract-plugin/dist/loader.js',
{ loader: 'css-loader', options: [Object] },
{ loader: 'postcss-loader', options: [Object] } ] },
{ test: /\.jsx?$/,
include:
[ '/home/me/Projects/myproject/assets',
'/home/me/Projects/myproject/node_modules/react-ajax-loader' ],
loader: 'babel-loader',
options:
{ cacheDirectory: '/home/me/Projects/myproject/cache/babel',
forceEnv: 'production' } },
{ test: /\.(jpe?g|png|gif|svg)($|\?)/i,
loader: 'url-loader',
options: { limit: 2048, name: '[name]-[sha1:hash:hex:10].[ext]' } },
{ test: /\.(eot|ttf|woff2?|htc)($|\?)/i,
loader: 'file-loader',
options: { name: '[name]-[sha1:hash:hex:10].[ext]' } } ] },
plugins:
[ NoEmitOnErrorsPlugin {},
HashedModuleIdsPlugin {
options:
{ context: null,
hashFunction: 'md4',
hashDigest: 'base64',
hashDigestLength: 4 } },
LoaderOptionsPlugin { options: { options: {}, test: { test: [Function: test] } } },
MiniCssExtractPlugin {
options:
{ filename: '[name].[hash].css',
chunkFilename: 'chunk.[chunkhash].css' } },
ProvidePlugin {
definitions:
{ '$': 'jquery',
jQuery: 'jquery',
timezoneJS: 'timezone-js',
React: 'react',
_: 'lodash' } },
DefinePlugin {
definitions: { 'process.env': { NODE_ENV: '"production"' } } },
{ apply: [Function: apply] } ],
bail: true,
devtool: 'source-map',
optimization:
{ minimize: true,
minimizer:
[ UglifyJsPlugin {
options:
{ test: /\.(js?)(\?.+)?$/i,
warningsFilter: [Function],
extractComments: /^!|\b(copyright|license)\b|@(preserve|license|cc_on)\b/i,
sourceMap: true,
cache: true,
parallel: true,
include: undefined,
exclude: /\.min\.js$/,
uglifyOptions:
{ output: [Object],
compress: [Object],
mangle: true,
sourceMap: true } } } ],
splitChunks: { chunks: 'all' },
runtimeChunk: true } }When using this plugin with source maps, webpack makes requests for the bundle with a hash name suffix that is the hash of the source map file instead of the bundle's hash. This leads to 404 errors.
This is the relevant parts of my current configuration:
const assetsOutputFileName = `assets/[name].[chunkhash].${CACHE_BUSTING}.js`;
{
output: {
chunkFilename: assetsOutputFileName,
sourceMapFilename: `${assetsOutputFileName}.map`
}
devtool: 'source-map'
optimization {
minimize: true,
minimizer: [
new UglifyJSPlugin({ sourceMap: true }),
]
}
}Thanks for making this plugin!
It's co common to use devtool: "hidden-source-map" in production. However, the problem with this use case is this plugin doesn't rename the final source map filename to match the final chunk asset filename. Usually when mapping stack traces server-side, the assumption is the source map filename is always x.js.map where the associated js file is x.js.
For "hidden-source-map" usage, it would be nice if this plugin renamed the source map filename to match the final chunk asset name.
Perhaps this could be an option/config. Happy to work on a PR and tests for this if that makes sense to you.
I use this plugin in my project，but it seems doesn't work .
after plugin reset hash with contenthash，webpack change hash again .
here is my test project:
https://github.com/z827101859/webpack-test
after run [npm run build]，the files (in build dir ) hash is not correct
When used with Webpack 4, the following error is emitted:
69% building modules 1345/1350 modules 5 active ...styles/vendor/bootstrap-dropdown.scss/Users/fisu/Projects/yoo/node_modules/webpack/lib/Chunk.js:438
throw new Error("Chunk.parents: Use ChunkGroup.getParents() instead");
With the following traceback:
Error: Chunk.parents: Use ChunkGroup.getParents() instead
at Chunk.get (/Users/fisu/Projects/yoo/node_modules/webpack/lib/Chunk.js:438:9)
at compilation.plugin (/Users/fisu/Projects/yoo/node_modules/webpack-plugin-hash-output/src/OutputHash.js:140:34)
at SyncHook.eval [as call] (eval at create (/Users/fisu/Projects/yoo/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:7:1)
at SyncHook.lazyCompileHook [as _call] (/Users/fisu/Projects/yoo/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeAssets.callAsync.err (/Users/fisu/Projects/yoo/node_modules/webpack/lib/Compilation.js:952:38)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/fisu/Projects/yoo/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/fisu/Projects/yoo/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeChunkAssets.callAsync.err (/Users/fisu/Projects/yoo/node_modules/webpack/lib/Compilation.js:948:32)
at _err0 (eval at create (/Users/fisu/Projects/yoo/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
at /Users/fisu/Projects/yoo/node_modules/uglifyjs-webpack-plugin/dist/index.js:262:11
at _class.runTasks (/Users/fisu/Projects/yoo/node_modules/uglifyjs-webpack-plugin/dist/uglify/index.js:63:9)
at UglifyJsPlugin.optimizeFn (/Users/fisu/Projects/yoo/node_modules/uglifyjs-webpack-plugin/dist/index.js:182:16)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/fisu/Projects/yoo/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/fisu/Projects/yoo/node_modules/tapable/lib/Hook.js:35:21)
at hooks.additionalAssets.callAsync.err (/Users/fisu/Projects/yoo/node_modules/webpack/lib/Compilation.js:943:36)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/fisu/Projects/yoo/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/fisu/Projects/yoo/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeTree.callAsync.err (/Users/fisu/Projects/yoo/node_modules/webpack/lib/Compilation.js:939:32)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/fisu/Projects/yoo/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/Users/fisu/Projects/yoo/node_modules/tapable/lib/Hook.js:35:21)
at Compilation.seal (/Users/fisu/Projects/yoo/node_modules/webpack/lib/Compilation.js:881:27)
at hooks.make.callAsync.err (/Users/fisu/Projects/yoo/node_modules/webpack/lib/Compiler.js:464:17)
at _err0 (eval at create (/Users/fisu/Projects/yoo/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:11:1)
at _addModuleChain (/Users/fisu/Projects/yoo/node_modules/webpack/lib/Compilation.js:749:12)
at processModuleDependencies.err (/Users/fisu/Projects/yoo/node_modules/webpack/lib/Compilation.js:688:9)
at process._tickCallback (internal/process/next_tick.js:150:11)
error Command failed with exit code 1.
I had an issue where one of the bundles was not updated correctly
name of my vendor file was not updated - it was still vendor.bundle..js - and it pointed to a non-existent source-map file.
this problem occurs only in presence of https://github.com/soundcloud/chunk-manifest-webpack-plugin
I fixed your plugin to be more robust and work with the other plugin, if you are ok, i can submit a pull request - https://www.screencast.com/t/c5sfjhWfiyR
my config is:
plugins: [
new ExtractTextPlugin({
filename: '[contenthash:22].css',
allChunks: true
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'public/index.html',
chunks: ['manifest', 'vendor', 'app']
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity,
filename: 'manifest.js'
}),
new webpack.optimize.CommonsChunkPlugin({
async: 'async-common',
children: true,
// deepChildren: true,
minChunks: 2
}),
new InlineChunkWebpackPlugin({
inlineChunks: ['manifest']
}),
new webpack.HashedModuleIdsPlugin(),
new WebpackPluginHashOutput()
]if I run build process by webpack node api，It will be blocked。
nothing happend。
Hey yo, good plugin owners!
Do you have any plans to upgrade this wonderful plugin to support Webpack 5? They've changed a few things like chunk.files is no longer an Array, but a Set. And a few other little things...
Version - 1.3.0
Currently, the outputhash creates and adds hash to a chunk in the compilation's after-optimize-assets hook. After discussion IRL, it seems like this is too early and the outputhash is better off adding the md5 hash at the emit lifecycle hook.
@scinos
the problem is here，when I update 1.3.1，my html hash was totally changed。
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'public/index.html',
chunks: ['manifest', 'vendor', 'app']
}),
new WebpackPluginHashOutput()
]then the output html hash has been changed。the reference script url is not right。
but as html-webpack-plugin said:
If you have plugins that make use of it, html-webpack-plugin should be ordered first before any of the integrated plugins.
I an confused here how to set the order here
The code added for mini-css-extract doesn't appear to work.
For CSS, we have a problem; if the user configured mini-css-extract-plugin with [chunkhash] in the filename, we'll wind up with that same chunkhash in both the JS and CSS filename. When we do the global replace, it'll replace all instances of that chunkhash with either the JS or CSS content hash depending on the order this code runs. So one of them will always fail. @GoodForOneFare pointed this out in his original pr. I think we could just throw an error if more than one file contains chunk.renderedHash.
Using chunkhash with mini-css-extract-plugin appears to be wrong anyway, you're supposed to use contenthash. That's handled in the 'this is a massive hack' section, which looks for a module hash matching the one in the filename. But this breaks if the same CSS module is included in multiple chunks:
Supposed we have chunk A and B
A.files: [foo-abcd.css, ...]
B.files: [foo-abcd.css, ...]
On chunk A, we'll look for a module that has hash abcd. We find it and proceed normally, adding it to nameMap and updating the hash/renderedHash of the module itself. Now the module has hash hashed, and the asset is renamed to foo-hashed.css.
A.files: [foo-hashed.css, ...]
B.files: [foo-abcd.css, ...]
nameMap: { 'abcd': 'hashed' }
Now we're processing chunk B. We'll still be looking for a module hash 'abcd'. However, that module has been mutated when processing chunk A, so we never find it. As a result, chunk B and any following chunks will continue to emit their old chunk names. However, since the mapping from abcd -> hashed is in nameMap, we're rewriting all the runtime files to reference hashed, and this results in broken module loading.
I think the correct solution here is to look at chunk.contentHash; if any of the values there match the filename, we can use that as oldChunkName. This avoids mutating any modules.
This plugin is causing my JS chunks to not load.
I'm getting errors like,
Loading chunk 25 failed
Simply removing the plugin makes the problem go away.
Under this plugin, the CSS and JS should have different filenames as I understand it, but that's not what webpack is trying to load:
I'm using a runtime chunk:
optimization: {
minimize: false,
removeAvailableModules: false,
runtimeChunk: 'single',
}I suspect that doesn't play well with this plugin?
Versions, for your reference:
❯ yarn list | grep webpack
├─ [email protected]
│ └─ webpack-sources@^1.0.1
│ └─ webpack-sources@^1.1.0
├─ [email protected]
│ ├─ webpack-sources@^1.1.0
├─ [email protected]
├─ [email protected]
│ ├─ webpack-addons@^1.1.5
├─ [email protected]
│ └─ webpack-log@^1.0.1
├─ [email protected]
│ ├─ [email protected]
│ ├─ webpack-log@^1.1.2
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│ ├─ uglifyjs-webpack-plugin@^1.2.4
│ └─ webpack-sources@^1.0.1
└─ [email protected]
└─ webpack-sources@^1.0.1
Let me know if there's anything else you need. I'm going to disable this for now.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.