Webpack4

A webpack 4 frontend architecture series: building a scaffold from scratch, integrating React, Redux, webpack 4, gitignore, formatting, env config, HMR, debugging. version in package.json What is the difference between ^ and ~ in package.json? They control which versions of a dependency your project may use. For example 3.4.5 follows MAJOR.MINOR.PATCH (semantic versioning). Official site: https://semver.org/. MAJOR: incompatible API changes MINOR: backward-compatible new functionality PATCH: backward-compatible bug fixes Example: you ship API version 1.0.0, fix four bugs → 1.0.4, add backward-compatible APIs → 1.1.0, fix two more bugs → 1.1.2. If a release breaks dependents, that is 2.0.0, and so on. In package.json, ~3.4.5 means >=3.4.5 <3.5.0 (patch updates within the minor line). ^3.4.5 means >=3.4.5 <4.0.0 (any compatible 3.x). See the link above for details. npm install antd --save often records ^3.13.0—you can use any 3.x below 4.0.0. There are edge cases for 0.x versions; roughly, treat ^ like ~ for those—check the official page. Before hot module replacement (HMR), a few prerequisites. We continue from the last example: html-webpack-plugin html-webpack-plugin generates HTML for you. Without it, after a build your JS lives under dist/ (the docs often use dist, so we rename build to dist). You would still hand-edit HTML to point at the new bundle paths. This plugin generates HTML and injects references to the JS in dist. Example: ...

A webpack 4 frontend architecture series: building a scaffold from scratch, integrating React, Redux, webpack 4, gitignore, formatting, env config, HMR, debugging. webpack scaffold Environment First: development environment Use VS Code and github. Concepts are covered in many places already, so I will keep this brief—see the docs. OK, let us start with how to use it. We will build the features a typical project needs one by one. First, a small example to see what the bundling flow looks like—no long talk. ...