KB Blog
Navigation

Webpack

Getting started

To create a webpack project from scratch

Project creation

# Create project
mkdir webpack-proj
cd webpack-proj
echo
yarn init # answer question
# Install webpack
yarn add --dev webpack webpack-cli
# [not-that-option] plugins
yarn add --dev html-webpack-plugin clean-webpack-plugin
# [optional] Install webpack server
yarn add --dev webpack-dev-server
# [optional] For style related stuff. SCSS is assumed
yarn add --dev style-loader css-loader postcss-loader autoprefixer precss sass-loader node-sass

Minimum files

Create the required files (Windows example):

New-Item -ItemType Directory src
New-Item .\src\main.js
New-Item .\src\main.scss
New-Item .\src\index.html
New-Item .\webpack.config.js

main.js:

import "./main.scss";

window.onload = () => {
  const block = document.createElement("p");
  block.innerHTML = "This is some text generated by JavaScript";
  document.body.appendChild(block);
};

main.scss:

body {
  background-color: #abcdef;
}

index.html:

<!DOCTYPE html>
<html>
  <!-- head-->
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>

  <!-- body -->
  <body>
    <h1>Webpack project</h1>

    <p>Hello webpack!</p>
  </body>
</html>

webpack.config.js:

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
  // Input/Outpus management
  entry: {
    main: "./src/main.js"
  },
  output: {
    filename: "[name].js"
  },
  resolve: {
    modules: [path.resolve("./node_modules")]
  },
  // Building mode
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    hot: true,
    publicPath: "/"
  },
  // Plugins
  plugins: [
    // https://github.com/jantimon/html-webpack-plugin
    new HtmlWebpackPlugin({
      title: "WebpackProj",
      template: path.resolve(__dirname, "src/index.html"),
      filename: "index.html",
      // https://github.com/joshbuchea/HEAD#meta
      meta: {
        charset: "utf-8",
        viewport: "width=device-width, initial-scale=1",
        description: "My webpack project"
      },
      // for reading/debugging
      minify: false
    }),
    new CleanWebpackPlugin(["dist/"]),
    new webpack.HotModuleReplacementPlugin()
  ],
  // Module
  module: {
    rules: [
      // Styles. Taken from Bootstrap:
      // https://getbootstrap.com/docs/4.0/getting-started/webpack/
      {
        test: /\.(scss)$/,
        use: [
          { loader: "style-loader" }, // inject CSS to page
          { loader: "css-loader" }, // translates CSS into CommonJS modules
          {
            loader: "postcss-loader", // Run postcss actions
            options: {
              plugins: function() {
                // post css plugins, can be exported to postcss.config.js
                return [require("precss"), require("autoprefixer")];
              }
            }
          },
          { loader: "sass-loader" } // compiles Sass to CSS
        ]
      }
    ]
  }
};

Configuration

Add scripts in package.json:

  "scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  }

Loader

Check webpack loaders documentation

Sources: