Skip to content

DIY repository setup

Jump to bottom
Martin Corevski edited this page May 25, 2018 · 8 revisions

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

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 under dev-dependencies
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 a 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 postcss-loader style-loader autoprefixer
  • 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.
  • postcss-loader is used in combination with autoprefixer. Autoprefixer adds browser specific prefixes to CSS attributes such as -webkit-box-shadow, so we only need to define box-shadow. In order for postcss-loader to work, we need postcss.config.file which would have this line of code module.exports = { plugins: [ require('autoprefixer') ] }
  • 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 url-loader file-loader
  • Url loader works like the file-loader but can return a DataURL if the file is smaller than the set byte limit.
  • File loader takes care of all the images and other assets that are part of the bundling.
npm i -S dotenv-webpack
  • Dotenv replaces all process.env variables with values set inside .env.* files
npm i -D copy-webpack-plugin
  • The copy webpack plugin can be set up to copy static files such as favicon, manifest.json and icons to the dist (build) folder.
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

-We can define a browserlist option so every package that uses this option will know for which browsers and versions to build for. This option can be defined just under the main option.

"browserslist": [
     "> 1%",
     "last 2 versions"
]

"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 in the file.
  • The code from webpack.config.js can be split into two separate files, one for development and one for the 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.
Clone this wiki locally