DIY repository setup

Step by step guide

• This wiki page is for those that want to create the repository from scratch in order to learn more about Webpack.

Install node

• Node.js for windows
• Node.js for linux
• Node.js npm cheat-sheet

Project folder and initialization

• UNIX commands

mkdir "directory-name" 
cd "directory-name"
npm init

Installed packages

npm i -D webpack

• i -D stands for install-save-dev, installs the package locally in the project

npm i -D webpack-cli

• This tool takes options via CLI and also via a config file (default: webpack.config.js) and gives it to the Webpack for bundling. Mostly for production builds.

npm i -D webpack-dev-server

• This is an Express node.js server that runs at port 8080. This server internally calls Webpack. It provides additional capabilities like reloading the browser i.e. “Live Reloading” and/or replacing just the changed module i.e. “Hot Module Replacement” (HMR).

npm i -D clean-webpack-plugin

• This tool (plugin) removes/cleans the content from the build folder before building.

npm i -D html-loader html-webpack-plugin

• The html loader minimizes and exports the HTML on demand.
• The plugin simplifies the creation of HTML files to be served in webpack bundle. This is especially useful for webpack bundles that include a hash in the filename which changes with every compilation.
• Essentially these two packages help us with recompiling html code updates. All the scripts are added to the end of the body tag.

npm i -D html-webpack-harddisk-plugin

• In order for the Webpack dev server to inject the Js files into the html file we need to use html hard disk plugin. The dev server only writes to memory.

npm i -D extract-text-webpack-plugin

• This plugin is used for text extraction from one or more bundles into separate file.
• For Webpack version 4 and above npm i -D extract-text-webpack-plugin@next

npm i -D sass-loader node-sass css-loader style-loader

• The style loader is the equivalent of the html loader in a sense that it adds the style tag as the other one adds the script tag.
• The css loader interprets @import and url() like import/require() and resolves them.
• Sass loader loads SASS/SCSS file and compiles it to CSS.
• Node sass provides binding for Node.js to LibSass. The sass loader requires node sass and webpack as peer dependency.

npm i -D file-loader

• File loader takes care for all the images and other assets that are part of the bundling.

npm i -D babel-loader babel-core

• In order to transpile ES6 code to ES5 for browser compatibility

npm i -D babel-preset-env

• For environment dependent compilation

PS: Local installation is recommended! If you want to install the packages globally you can use i -g

Package json file

"scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --env.NODE_ENV=development --mode development",
    "build:prod": "webpack --env.NODE_ENV=production --mode production",
    "watch": "webpack --env.NODE_ENV=development --watch --mode development",
    "babel": {
      "presets": [
        "env"
      ]
    }

Webpack config js file

• Everything is documented inside the file.
• The code from webpack.config.js can be split in two separate files, one for development and one for production environment. This is either personal preference or it's getting too hard to update the configuration quickly.

Folder structure

• The folder structure can be updated and then all the paths in webpack.config.js need to be updated accordingly.