Although automatic watching for changes and rebuilding bundles is a great webpack feature that improves development, there is some more manual work that needs to be done before you see the result in the browser. I would like to show you how webpack-dev-server can help you.
Webpack is executed multiple times during standard development. Whenever I change an SCSS file, I have to run the whole webpack process to convert SCSS to CSS and bundle all resources. Until now I have been doing it by manually running npx webpack --mode=development. There is a better way - webpack can observe the source files and do it's job automatically.
Would you like to use Bootstrap but you do not know how to force webpack to bundle it? This part of the tutorial for webpack describes how to add any external CSS library to a project with webpack.
- Tutorial for webpack 4 - part 08 - external JS library (jQuery)
- Tutorial for webpack 4 - part 07 - multiple JS files for a page
- Tutorial for webpack 4 - part 06 - SCSS
- Tutorial for webpack 4 - part 05 - CSS
- Tutorial for webpack 4 - table of contents
- Tutorial for webpack 4 - part 04 - Modes
- Tutorial for webpack 4 - part 03 - HTML files in bundles
- Tutorial for webpack 4 - part 02 - first bundles
- Tutorial for webpack 4 - part 01 - introduction
- npm ERR! code ERR_STREAM_WRITE_AFTER_END
- Code minification and cache-busting
- Code minification with Gulp
- Plugin for EU cookies law
- Grid system in Bootstrap 4
- Adding rows to HTML table with jQuery
- Full reinstall of Node.js
- jQuery UI themes - buttons and dialogs
- Button and confirmation dialog in jQuery UI
- Google-like calendar in web application
- What the heck is the event loop anyway?
- Code minification - the archaism?