Webpack Configuration (part-2) - Code Splitting

Update the output filename to use In our webpack.config.js file :

output: {
    ...
   filename: "[name].[contenthash].js",  // split js file
}

JSON

Also add a optimisation like this :


 optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
  },

JSON

Now our final webpack.config.js will look something like this:


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

const config = {
  mode: "development", // Defines the mode to pass to webpack.
  entry: "./src/index.js", // The entry point(s) of your application e.g. ./src/main.js.
  output: {
    // Output location of the file generated by webpack e.g. ./dist/.
    path: path.resolve(__dirname, "dist"),
    filename: "[name].[contenthash].js", 
  },
  devServer: {
    historyApiFallback: true,
    static: {
      directory: path.join(__dirname, "public"), // Directory for static contents.
    },
    compress: true, //  Enables gzip compression for everything served.
    port: 9000, // Allows to specify a port to use.
    hot: true, //  Enables Hot Module Replacement.
    open: true, //  Allows to configure dev server to open the browser(s) and page(s) after server had been started (set it to true to open your default browser).
    liveReload: true, // Enables reload/refresh the page(s) when file changes are detected (enabled by default).
    client: {
      progress: true, // Prints compilation progress in percentage in the browser.
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Output Management",
      template: "./public/index.html", // Specify the path to your existing index.html
      filename: "index.html",
    }),
  ],
  optimization: {
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
  },
};

module.exports = config;

Update your package.json to add few more script commands : clean, build-dev and build-prod

Clean – Clean will remove the generated bundle.js inside dist folder.
Build-dev – Build-dev will generate files inside dist in development mode
Build-prod – Build-prod will generate files inside dist in production mode


{
  "name": "webpack-boilerplate",
  "version": "1.0.0",
  "description": "A Boilerplate for building webapps using TS",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "serve": "webpack serve",
    "clean": "rm dist/bundle.js",
    "build-dev": "webpack --mode development",
    "build-prod": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.3",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

Now if you run :

npm run clean

Your dist folder will be cleared

npm run build-dev

New optimised files will be generated with development mode.

Similar

npm run build-prod

This will create a minified generated files for production mode

Github Commit Ref GitHub commit changes for Optimize with Code Splitting

Webpack Configuration (part-2) – Code Splitting

Comments

Leave a Reply Cancel reply