I am running my webpack-dev-server with
webpack-dev-server --lazy --inline --progress --colors --port 8082
However this shows a 404 error in my browser when it tries to access bundle.js
.
Everything else seems fine since if i replace --lazy
with --hot
, things work fine.
What exactly does --lazy
do then?
Update:
Here is the webpack file -
module.exports = {
devtool: "source-map",
entry: [
'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
"./app/main.js"
],
output: {
path: "./js",
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader"},
{ test: /\.js$/, exclude: /node_modules/, loaders: ["react-hot"] }
]
}
};
You can load only the files you want and improve your app's performance. Webpack allows you to lazy load 3rd-party libraries, and, even better, it allows you to chunk your own app and lazy load parts of it on demand. Webpack has implemented the ES7 dynamic import spec (available in Chrome and Safari).
webpack-dev-server is Webpack's officially supported CLI-based tool for starting a static server for your assets. While you don't need any CLI tools to use Webpack, webpack-dev-server gives you a single command that starts a static server with built-in live reload.
And if I want to use react-hot-loader, is the webpack-dev-server necessary? Nope, it works on top of Webpack's hot module replacement interface. You can create your own 'hot server' if you want.
Webpack v4+ will minify your code by default in production mode .
After some debugging I found that in webpack-dev-middleware
(in webpackDevMiddleware
function) there's the following if statement:
// in lazy mode, rebuild on bundle request
if(options.lazy && (!options.filename || options.filename.test(filename))) {
rebuild();
}
The rebuild()
function is never executed because options.filename.test(filename)
aways returns false
. And that's because filename
value has a slash ("/bundle.js"). So, I changed the options.filename
regex to allow this slash and it fixed the issue.
I made a pull request on github: https://github.com/webpack/webpack-dev-middleware/pull/62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With