I have use these package to comply webpack HMR:
webpack stats config:
stats: {
assetsSort: 'name',
children: false,
chunks: false,
colors: true,
warnings: false
}
use webpack-dev-middleware
const _devMiddleware = require('webpack-dev-middleware')(_compiler, {
publicPath: _webpackConfig.output.publicPath,
stats: _webpackConfig.stats
});
Everytime when I run command npm run dev
, the console will print assets info like:
scripts/app.bundle.js 1.03 MB 50, 100 [emitted] [big] app
scripts/c-actionsheet.js 28.1 kB 61, 100 [emitted] c-actionsheet
scripts/c-alphabet.js 110 kB 55, 100 [emitted] c-alphabet
scripts/c-back.js 18.8 kB 46, 100 [emitted] c-back
scripts/c-basic.js 107 kB 74, 100 [emitted] c-basic
scripts/c-build-list.js 30 kB 89, 100 [emitted] c-build-list
scripts/c-building-info.js 44.4 kB 83, 100 [emitted] c-building-info
but when I use webpack HMR to rebuild the file that I have changed, the console will print the all assets info, include emmited files and unrelated files, just like:
scripts/app.bundle.js 1.03 MB 50, 100 [emitted] [big] app
scripts/c-actionsheet.js 28.1 kB 61, 100 c-actionsheet
scripts/c-alphabet.js 110 kB 55, 100 c-alphabet
scripts/c-back.js 18.8 kB 46, 100 c-back
scripts/c-basic.js 107 kB 74, 100 c-basic
I just want to know about the files I've changed, and I don't care about unrelated files info.
So, Can you help me to let webpack only print these emmited files info ?
You can set the option stats.cachedAssets
to false
. With that it only shows the assets that are actually emitted. It doesn't seem to be documented but here is the responsible source line and the definition of showCachedAssets.
Your stats configuration will be:
stats: {
assetsSort: 'name',
cachedAssets: false,
children: false,
chunks: false,
colors: true,
warnings: false
}
The option is now documented at Configuration - Stats.