webpack: Webpack 2 "watch" Extremely Slow
I’m trying to upgrade to Webpack 2
and have had little problems except the “watch” task and watch done through webpack-dev-middleware
are orders of magnitude slower (3 vs 35 seconds). Is there some sort of option
I’m missing to speed this up?
note: I’m compiling a bunch of node_modules
from es6 from our private NPM if you have a look at the exclude
regex for Babel.
Webpack ^1.12.9
:
webpack building...
[16:05:09] Webpack Bundled main bundle in 3714ms
webpack built 072b247072d6d3f314e3 in 3714ms
[16:05:26] Webpack Bundling main bundle
webpack building...
[16:05:26] Webpack Bundled main bundle in 554ms
webpack built 072b247072d6d3f314e3 in 554ms
webpack building...
[16:07:29] Webpack Bundled main bundle in 3487ms
webpack built c652ba9f489e2bab5a5e in 3487ms
[16:07:40] Webpack Bundling main bundle
webpack building...
[16:07:40] Webpack Bundled main bundle in 564ms
webpack built c652ba9f489e2bab5a5e in 564ms
Webpack 2.0.4-beta
:
webpack building...
[15:34:03] Webpack Bundled main bundle in 35313ms
webpack built 7fbdcc793917d2b8c72a in 35313ms
[15:34:28] Webpack Bundling main bundle
webpack building...
[15:34:46] Webpack Bundled main bundle in 17344ms
webpack built 4425398f9ab1a3be7d51 in 17344ms
[15:39:19] Webpack Bundled main bundle in 28707ms
[15:39:31] Webpack Bundling main bundle
[15:39:46] Webpack Bundled main bundle in 14704ms
My config:
if (runHot) {
const Express = require('express');
const app = new Express();
const serverOptions = {
contentBase: buildDir,
quiet: true,
noInfo: true,
hot: true,
inline: true,
lazy: false,
publicPath,
headers: {'Access-Control-Allow-Origin': '*'},
stats: {colors: true}
};
app.use(require('webpack-dev-middleware')(compiler, serverOptions));
app.use(require('webpack-hot-middleware')(compiler));
} else {
compiler.watch({
aggregateTimeout: 300,
poll: true
}, logger);
}
{
"externals":{
"jquery":"jQuery"
},
"resolve":{
"extensions":[
"",
".js",
".json",
".jsx",
".html",
".css",
".scss",
".yaml",
".yml"
],
"resolve":[
"node_modules",
"src/js"
],
},
"node":{
"dns":"mock",
"net":"mock",
"fs":"empty",
"__filename":true,
"__dirname":true
},
"context":"/src",
"cache":true,
"debug":true,
"entry":{
"main":[
"webpack-hot-middleware/client?path=http://localhost:8080/__webpack_hmr&reload=true&noInfo=true",
"babel-polyfill",
"./js/index.js"
]
},
"output":{
"path":"/dist",
"publicPath":"http://localhost:8080/",
"filename":"js/[name].js"
},
"module":{
"loaders":[
{
"test": /^.+\/node_modules\/(?!@hfa\/).+\.jsx?$/,
"loader":"babel",
"query":{
"presets":[
"react",
"es2015-native-modules",
"stage-0"
],
"plugins":[
"transform-runtime",
"transform-decorators-legacy",
"typecheck",
[
"react-transform",
{
"transforms":[
{
"transform":"react-transform-hmr",
"imports":[
"react"
],
"locals":[
"module"
]
},
{
"transform":"react-transform-catch-errors",
"imports":[
"react",
"redbox-react"
]
}
]
}
]
]
}
}
]
},
"devtool":"source-map"
}
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 19 (10 by maintainers)
I think the unsafe resolve cache was on by default in webpack 1 and is off by default in webpack 2 (need to enable it in the default).
Could you try setting
resolve.unsafeCache = true
?btw. your settings
resolve.resolve
should beresolve.modules
and"src/js"
should be absolute."cheap-module-source-map"
->"eval-cheap-module-source-map"
The eval versions are much faster on incremental build.CommonsChunkPlugin config looks weird.