MENU


Webpack

Alexa's Ranking: 13,816

To demonstrate the essential functionalities of Webpack, let's go through an example.

On the working directory, first, install the necessary dependencies:


> npm install -g webpack > npm install --save-dev webpack-cli jquery
        style-loader css-loader file-loader webpack-dev-server
         clean-webpack-plugin html-webpack-plugin

Prepare the following files:

1) [project]/package.json(modify the existing file)


{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open chrome"
    "watch": "webpack --watch",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "sideEffects": [
    "*.css"
  ],
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^4.3.0",
    "file-loader": "^6.1.0",
    "html-webpack-plugin": "^4.4.1",
    "jquery": "^3.5.1",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }}

2) [project]/webpack.config.js


const webpack = require('webpack');const path = require('path');const { CleanWebpackPlugin } =
                                        require('clean-webpack-plugin');const HtmlWebpackPlugin =
                                        require('html-webpack-plugin');module.exports = {
    mode: 'development',
    entry: {
       plist: ['./src/plistA.js', './src/common.js'],
       product: './src/common.js',
    },
    output: {
       filename: '[name].bundle.js',
       path: path.resolve(__dirname, 'dist'),
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
    },
    optimization: {
        usedExports: true,
    },
    module: {
       rules: [
        { test: /\.css$/,
          use: ['style-loader','css-loader']},
        { test: /\.(png|svg|jpg|gif)$/,
          use: ['file-loader']},
       ],
    },
    plugins: [
        new CleanWebpackPlugin(
                                { cleanStaleWebpackAssets: false }),
        new HtmlWebpackPlugin(
                                {title: 'Development'}),
        new webpack.ProvidePlugin(
                                {$: 'jquery', jQuery: 'jquery'})
    ],};

3) [project]/src/plistA.js


import { cube } from './plistB.js';import './style.css';import car from './car.jpg';const myCar = new Image();myCar.src = car;document.body.appendChild(myCar);$("img").css("height","30vh");console.log(cube(3));  // 27

4) [project]/src/plistB.js


export function square(x) {
    return x * x;}
   export function cube(x) {
    return x * x * x;}

5) [project]/src/sytle.css


body{
    background:yellow;}

6) (other files)[project]/src/car.jpg

[project]/src/common.js (empty dummy)

To build the bundles:

> npm run build


D:\webpack-demo>npm run build> webpack-demo@1.0.0 build D:\webpack-demo> webpackHash: 2c7d9b342468a7e86580Version: webpack 4.44.1Time: 558msBuilt at: 09/19/2020 8:40:29 PM
         Asset
       Size
   Chunks
               Chunk Names96044c4864d97e6d4d02d306e974ef04.jpg 531 KiB
    [emitted] [immutable]index.html
  274 bytes [emitted]
      plist.bundle.js
    813 KiB
    plist
  [emitted]
     plistproduct.bundle.js
   8.52 KiB
  product
  [emitted]
  productEntrypoint plist = plist.bundle.jsEntrypoint product = product.bundle.js[0] multi ./src/plistA.js ./src/common.js 40 bytes {plist} [built][./node_modules/css-loader/dist/cjs.js!./src/style.css] 487 bytes {plist} [built][./src/car.jpg] 80 bytes {plist} [built][./src/common.js] 0 bytes {product} {plist} [built][./src/plistA.js] 239 bytes {plist} [built][./src/plistB.js] 126 bytes {plist} [built][./src/style.css] 519 bytes {plist} [built]
    + 3 hidden modulesChild HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
       1 module

This generates four files on the directory [project]/dist/, corresponding to the 'entry' and 'output' fields in the configuration file.:

index.htmlplist.bundle.jsproduct.bundle.js96044c4864d97e6d4d02d306e974ef04.jpg

By default, HtmlWebpackPluginHtmlWebpackPlugin HtmlWebpackPlugin will generate its index.html file:


<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8">
    <title>Development</title>
  <meta name="viewport"
      content="width=device-width, initial-scale=1"></head>
  <body>
     <script src="plist.bundle.js"></script>
      <script src="product.bundle.js"></script>
   </body></html>

Notice how the files 'plistA.js', 'plistB.js', 'style.css', and the jQuery library file have been packed into one single file – 'plist.bundle.js'. 'product.bundle.js' has a relatively small storage footprint because it has not used jQuery. Notice also that to import non-script assets, you need to declare the loaders in the 'module' field in the configuration file.

To test the site on a browser:

> npm run start

This launches the development server as declared in the configuration file:


devServer: {
     contentBase: './dist',},

The declaration devtool:'inline-source-map' in the configuration file allows you to trace the line numbers back to the original files on the console:

27 plistA.js

To update the bundle files automatically as you change them, open another command-line interface:

> npm run watch

{ cleanStaleWebpackAssets: false }tells CleanWebpackPluginwe don't want to remove index.html after the incremental build triggered by watch.

Before building the files, switching the 'mode' to 'production' in the configuration file obfuscates and minifies the code. It also removes unused dead code (eg. square()), a process known as 'tree shaking'. Because the CSS loaders do more than exposing exports, you need to designate CSS files as a side effect in package.json:


"sideEffects": [
    "*.css"
  ],

The following declaration in the configuration file instructs Webpack not to include unused exports into the resultant bundle file:


optimization: {
   usedExports: true, },

That's it. We have overviewed the main functionalities of Webpack.

In addition to numerous loaders (eg. for SCSS, fonts, etc), plugins, and optimizations, the possibilities with Webpack are many:

Preloading / Prefetching Capabilities use JavaScript comments to load a bundle ahead of its use. (see 2.1.2)

Dynamic Imports use JavaScript comments and the import() syntax to handle dynamic loading of modules.

Hot Module Replacement (HMR) allows all kinds of modules to be updated at runtime without the need for a full refresh.

Lazy Loadingessentially involves splitting your code at logical breakpoints and then loading it on-demand.

Environment Variables may be used in the configuration file to pass in command-line values.

Progressive Web Applications (or PWAs)are web apps that deliver an experience similar to native applications. Particularly, the apps can function when offline.

Caching allows sites to load faster with less unnecessary network traffic.

Scaffolding allows you to easily set up a complex webpack configuration.

CSP capability lets Webpack add a nonce to all scripts that it loads.

Third-party Integrations with CommonJS, AMD, Vagrant, and TypeScript are ready.

Mode Configuration Files such as webpack.common.js, webpack.dev.js, and webpack.prod.js allow you to use separate configuration files for different environment modes.

Please refer to the Webpack official website for more information:https://webpack.js.org/