Webpack Configuration (part-1) - Setup HTML Webpack Plugin

Till now, we can only view our index.html, but we have not connected our index.js (javascript file yet), if you serve the web app and try to check the console, there will be no “hello world” from our index.js file – so let’s use our js files now.

npm install --save-dev html-webpack-plugin

JavaScript

Let’s move our dist/index.html to public/index.html

Then add HTML Webpack Plugin to webpack.config.js

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin"); // add this
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: "bundle.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: [  // add HTML Webpack Plugin
    <strong>new</strong> HtmlWebpackPlugin({
      title: "Output Management",
      template: "./public/index.html", // Specify the path to your existing index.html
      filename: "index.html",
    }),
  ],
};

<em>module</em>.<em>exports</em> = config;

JavaScript

Let’s now serve our app:

npm run serve

JavaScript

Now the site will be up, check the page source, you can see a bundle.js script got added :

<!DOCTYPE <em>html</em>>

<html <em>lang</em>="en-US">
    <head>
    <title> TS Webpack Boilerplate </title>

    <meta <em>name</em>="charset" <em>content</em>="UTF-8" />
    <meta <em>name</em>="description" <em>content</em>="TS Webpack Boilerplate App" /> 
  <meta <em>name</em>="keywords" <em>content</em>="javascript, typescript, webpack, ts-boilerplate, webpack-boilerplate" /> 
  <meta <em>name</em>="viewport" <em>content</em>="width=device-width, initial-scale=1.0" />

    <!-- bundle.js from webpack -->
    <script <em>defer</em> <em>src</em>="bundle.js"></script></head>

<body>
    <header>
        <div <em>id</em>="logo">
            <h1> TS WEBPACK BOILERPLATE</h1>
        </div>
    </header>

    <main>
        <h1> This is a setup built on Webpack, Typescript, SAAS</h1>
    </main>

    <footer>
        <p>© 2023</p>
    </footer>
</body>

</html>

JavaScript

Cool, now if you see the console. You can see our “hello world”

Github Commit Github commit reference for Setup HTML Webpack Plugin

Webpack Configuration (part-1) – Setup HTML Webpack Plugin

Comments

Leave a Reply Cancel reply