- Chunking for caching https://webpack.js.org/guides/caching/
- CSS Support (loading, autoprefixing, etc.)
Pieces of this app boilerplate are inspired by
create-react-app. The config
folder is very similar, with config/paths.js and config/polyfills.js being
the same idea. Some differences is CRA is using
webpack-dev-server, which is in
maintenance mode, while we're using
webpack-serve, which is the
future of webpack serving.
Upgrades over CRA: Webpack 4, Babel 7.
Babel is a transpiler, we use several modules for it to target to specific browsers so that we can use ES2018 syntax in places where it's not fully supported. Babel is what lets us use things like async/await and object spread operators.
ESLint is a pluggable and configurable tool for identifying and reporting on patterns in JS. Used in combination with prettier, we can detect and fix many problems in code before they even are saved to disk.
We include eslint-config-prettier to turn off rules that conflict with running prettier.
Husky sets up githooks to tie into. Normally you would edit them yourself in the .git directory of a repository, however you can't commit those into the main repo. What you can do is have Husky set up several githooks for you, we use it for pre-commit.
Easy to use JS test running platform. Faster than Ava at the moment.
A couple of dev-dependencies are related to Jest:
- babel-core (bridge)
- babel-jest
Lint Staged ties in with Husky to run the linters before committing your code. It makes it so that no errors make it into the repository. Running the linter on the whole project would be slow, so we only lint the ones that are staged.
Path is used in our build process (see config/paths.js) to resolve paths on users systems or servers.
"Prettier is an opinionated code formatter." We change some of those opinions.
Webpack is used for the build process. Webpack can be extended to handle many different use cases, as well as configured to handle things like hashing the JS build name or running a development server with a watcher.
A few dev dependencies are for webpack:
- babel-loader
- webpack-cli
- html-webpack-plugin
babel-loader is a loader for webpack that runs babel against file changes.
html-webpack-plugin makes it so we can edit the html doc to include the right hashed JS file after the build.
webpack-cli is just a cli interface for running webpack from the package.json. This could be replaced with a script in our scripts directory.
Webpack-Serve was formerly webpack-dev-server. Webpack Serve serves a webpack app in a modern way. Based on Koa, it uses native websockets, and because of this is limited to developing on browsers which support native websockets. Don't do your dev work on IE6 (but use Babel to bundle for it)!