Webpack 5 Boilerplate Template

Requirements

• node : ^12 || >=14 - v16.13.0
• npm

Setup

Installation

1. Choose and download the latest template release from List of Releases.
2. Extract the release archive to a new directory, rename it to your project name and browse the directory.
3. Install all dependencies using yarn install command.

$ yarn install --frozen-lockfile

Configuration

Environment Configuration

• Edit the configuration/environment.js if you want to specify:
  • server: configure development server, specify host, port. Refer to the full development server configuration options for webpack-dev-server.
  • limits: configure file size thresholds for assets optimizations.
    • Image/Font files size in bytes. Below this value the image file will be served as Data URL (inline base64).
  • paths: src or dist directories names and file system location.

Additional webpack configuration

You can additionally configure webpack for specific environment:

• development - configuration/webpack.dev.config.js
• production - configuration/webpack.prod.config.js
  • Note that if you prefer to build and deploy sourcemap files:

You should configure your server to disallow access to the Source Map file for normal users!

Development

Assets Source

• SASS/PostCSS files are located under src/scss/
• JavaScript files with support of latest ECMAScript ES6 / ECMAScript 2016(ES7)/ etc files are located under src/js/
• Image files are located under src/images/
• Font files are located under src/fonts/
• HTML files are located under src/
  • It will automatically build all HTML files placed under src/ directory, no need to manually configure each template anymore!

Start project in DEVELOPMENT MODE

$ yarn start

Build Assets

One time build assets for development

$ yarn build

Build assets and enable source files watcher

$ yarn watch

This command is suitable if you develop with external web server.

Note: File watching does not work with NFS (Windows) and virtual machines under VirtualBox. Extend the configuration in such cases by:

module.exports = {
  //...
  watchOptions: {
    poll: 1000 // Check for changes every second
  }
};

Start a development server - reloading automatically after each file change.

$ npm run dev

Production

Build Assets

Optimize assets for production by:

$ npm run production

Get Built Assets

• CSS files are located under /dist/css/
• JavaScript files with support of ES6 / ECMAScript 2016(ES7) files are located under /dist/js/
• Images are located under /dist/images/
  • Images part of the design (usually referenced in the CSS) are located under /dist/images/design/
  • Images part of the content (usually referenced via <img> tags) are located under /dist/images/content/
• Fonts are located under /dist/fonts/
• HTML files are located under /dist/

Run Code Style Linters

SASS

$ npm run lint:sass

JavaScript

$ npm run lint:js

Additional Tools

Run Assets Bundle Analyzer

$ npm run stats

This will open the visualisaion on the default configuraiton URL localhost:8888, you can change this URL or port following the package documentation.