Webpack Dev Server
We want to avoid typing
$ npm run build:dev -s every time we edit a source file.We can pass arguments to npm scripts by adding
-- : $ npm run build:dev -s -- myargumentSo we can start a watch:
$ npm run build:dev -- --watchThis will make Webpack much faster.
Add webpack-dev-server to your dependencies (npm install). We need at least version 2.1.0-beta.0
And update the npm scripts
// **** package.json ****
"scripts": {
"dev": "webpack-dev-server"
}
Now $ npm run dev and use the dev server. We also get a listing of all the files that are in our bundle.It's about ~100 items long, even though we only included 1 file! Webpack adds all these modules to enhance your development experience (live reload, hot module replacement etc).
Q&A: What if we have a CMS, how to use Webpack with that?
6:00
You need to find a workaround for this (to add the bundle.js and to the refreshing).
The Webpack Dev Server does not use your previously generated bundle.js file, you can delete that. It's serving the file from memory which is much faster.
Q&A: Limit to the size of the app?
It can become slow in time. He had apps that took 40 seconds to start, but after that the recompilation is very fast (under 200ms).