Always refer to this README for proper use of xboilerplate. This README will always be updated as features and changes are made.
Webpack setup for PROJECT BOILERPLATE
Provide a complete setup for project. Features :
- JavaScript and CSS bundling
- Pug template compiling to HTML
- Batch image optimization
- Hot Module Replacement (pug template, scss and js) when development
- Production build configuration with optimization and versioning
Adds on:
- eslint
- stylelint
- prettier
- git pre-commit hooks
- javascript testing with jest
- javascript static type checking with flow
- lazy loading images
- work offline using workbox (https://developers.google.com/web/tools/workbox/guides/codelabs/webpack)
Developement setup as required in Xtremax Frontend Development Group (https://wiki.xtremax.com/display/GEEK/Code+Convention and https://wiki.xtremax.com/display/GEEK/Extra+Tooling+for+High+Quality+Javascript+Code).
Project Structure
Folder | Contents | Notes |
---|---|---|
src/ |
Project source code | |
├──img/ |
image source files | → dist/img |
├──script/ |
.js source files |
→ dist/js/ |
├────__tests__/ |
script test source | |
├──style/ |
.scss source files |
→ dist/css/ |
dist/ |
Distributable bundles | |
├──fonts/ |
compiled fonts files | |
├──img/ |
compressed images files | |
├──js/ |
bundled js files | |
├──css/ |
bundled css files | |
tools/ |
tools related script | |
├──git-hooks/ |
git hooks bash script |
Clone this repository
make sure your git version >= 2.9 to enable git config
git clone <repository>
git config core.hooksPath ./tools/git-hooks
Install
npm install
Note on installing new package or modules to project
Usenpm install <package> --save --save-exact
to avoid risk of drifting the package or modules to different versions.
Start the application in development mode
npm start
This will automatically open chrome browser. If not please open http://localhost:3000 in your browser.
(HMR UPDATE) Start the application in development mode (Hot Module Replacement)
npm run open:dev:hmr
This behavior is similar to npm start, but especially for SCSS file when updated, it will be hot reloading your styling by injecting hot bundle js automatically on head tag without hard reload.
This mean, we don't use BrowserSync again , and we use webpack-dev-server instead.
Build for production
npm run build
This will automatically open chrome browser. If not please open http://localhost:8000 in your browser.
This will generate a javascript bundle and css files on the dist
folder. Please follow semantic versioning for number versioning of your production assets (https://semver.org/).
Run test suites
npm run test
It is a good practice to test all your script before push your code changes by running test script.
Run flow type checker
npm run flow
The first time this is run, the Flow background process (https://flow.org/en/docs/usage/#toc-run-flow-background-process) will be spawned and all of your Flow files will be checked. Then, as you continue to iterate on your project, the background process will continuously monitor your code such that when you run flow again, the updated result will be near instantaneous.
It is also a good practice to run flow type checker on all your script before push your code changes by running test script.
Other command
You can always look at package.json for list of scripts that you can run other than start and build. You can even add your scripts if you want! Please refer to https://docs.npmjs.com/misc/scripts for further information on "How npm handles the 'scripts' field". You may also want to dig more on webpack cli here https://webpack.js.org/api/cli/.