webpack Caching

https://webpack.js.org/guides/caching/

Output Filenames

webpack-demo/webpack.config.js

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

  module.exports = {
    entry: './src/index.js',
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
       title: 'Caching'
      })
    ],
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist')
    }
  };

webpack-demo/src/index.js

  import _ from 'lodash';

  function component() {
    var element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

webpack-demo/package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^1.0.0",
    "css-loader": "^2.0.0",
    "csv-loader": "^3.0.2",
    "express": "^4.16.4",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-middleware": "^3.4.0",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.5",
    "xml-loader": "^1.2.1"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

C:\Users\ZiGoo\webpack-demo>npm run build

> [email protected] build C:\Users\ZiGoo\webpack-demo
> webpack

clean-webpack-plugin: C:\Users\ZiGoo\webpack-demo\dist has been removed.
Hash: 9696f8831df4d4b698be
Version: webpack 4.27.1
Time: 2882ms
Built at: 2018-12-14 16:42:02
                       Asset       Size  Chunks             Chunk Names
                  index.html  197 bytes          [emitted]
main.f76c3535f4e4ded8fc2f.js   70.3 KiB       0  [emitted]  main
Entrypoint main = main.f76c3535f4e4ded8fc2f.js
[1] ./src/index.js 292 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules

C:\Users\ZiGoo\webpack-demo>

Extracting Boilerplate

webpack.config.js

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

  module.exports = {
    entry: './src/index.js',
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
       title: 'Caching'
      })
    ],
    output: {
      filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist')
    },
    optimization: {
      runtimeChunk: 'single'
    }
  };

C:\Users\ZiGoo\webpack-demo>npm run build

> [email protected] build C:\Users\ZiGoo\webpack-demo
> webpack

clean-webpack-plugin: C:\Users\ZiGoo\webpack-demo\dist has been removed.
Hash: e588c427e8f4288736eb
Version: webpack 4.27.1
Time: 2880ms
Built at: 2018-12-14 16:54:53
                          Asset       Size  Chunks             Chunk Names
                     index.html  275 bytes          [emitted]
   main.a904da3ffcd12f215cb9.js   69.5 KiB       0  [emitted]  main
runtime.2a0331f68276675b6b4d.js   1.42 KiB       1  [emitted]  runtime
Entrypoint main = runtime.2a0331f68276675b6b4d.js main.a904da3ffcd12f215cb9.js
[1] ./src/index.js 292 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [3] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules

C:\Users\ZiGoo\webpack-demo>