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.
Development in JavaScript would be incomparably easier without a bunch of issues that are caused by differences between browsers. Especially one of them that is always behind the others - Internet Explorer. Unfortunately, people still use it, even knowing that Microsoft released Edge which should replace IE. It is very likely that your JavaScript application will not work properly on IE11 unless you consciously take care of it. Welcome to IE11 hell.
ES6 with modules is preferred by webpack when writing JavaScript code. It means that one module has to export a function so mine could import it and use it. It works well unless the library does not follow ES6 modularity principles like jquery-ui.
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.
- 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
- Var, let and const in JavaScript
- 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
- Two equality operands (== and ===) in JavaScript
- Full reinstall of Node.js
- How it feels to learn JavaScript in 2016
- 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?