Custom Webpack Config Boilerplate

A project that provides basic webpack 4 boilerplate to quickstart development.

Features

• Webpack
• Dev Server
• Hot Module Replacement
• Development & Production Mode
• Babel
• SCSS
• PostCSS
• Polyfill

Getting Started

Clone this repo and install

npm install

Usage

Development Server

npm run start

Production Build

npm run build

Dependencies

Webpack

• webpack: Module bundler
• webpack-cli: Webpack's Command Line Interface
• webpack-dev-server: Webpack's development server that provides live reloading
• webpack-merge: Merge common settings with development and production
• cross-env: Run scripts that set and use environment variables across platforms

Babel

• @babel/core: Convert ES6 code into a backwards compatible JavaScript
• @babel/preset-env: Specify an environment and only transpiles features that are missing in that environment
• @babel/polyfill: Use the full set of ES6 features beyond syntax changes
  • core-js: A polyfill of the JavaScript standard library

Loaders

• babel-loader: Transpile JavaScript files using Babel and Webpack
• sass-loader: Load Sass/SCSS file and compile to CSS
  • node-sass: Node Sass
• postcss-loader: Loader for webpack to process CSS with PostCSS
  • postcss-preset-env: Convert modern CSS into something browsers understand
  • cssnano: Optimize and compress PostCSS
• css-loader: Load CSS with resolved imports and returns CSS code
• style-loader: Inject CSS into the DOM
• html-loader: Export HTML as string
• file-loader: Emit the file into the output folder and return the (relative) URL

Plugins

• html-webpack-plugin: Create HTML to serve bundles
• clean-webpack-plugin: Remove/clean build folder
• mini-css-extract-plugin: Extract CSS into separate files
• optimize-css-assets-webpack-plugin: Optimize/minimize CSS assets
• terser-webpack-plugin: Minify JavaScript