How To Bundle A Simple Static Site Using Webpack

With today’s digital era, many individuals and business owners establish their websites to attract their target audience. The most commonly used site today is a static site. Are you not familiar with this type of site? Read further.

Static site defined

A static site has web pages that have fixed content. The pages are coded in HTML and provides similar information to all visitors. It is among the widely used and easy make websites. A static site doesn’t need database design and web programming. You can build a static site by creating HTML pages and publish them to a web server. However, a static site has fixed code, so you can’t change it unless the webmaster updates it manually.

Now that you learned about static sites let us proceed on how to bundle a simple static site using Webpack.

Creating your Static site with Webpack

Webpack is an indispensable element of the JavaScript toolchain. It was widely used by major players in the world of JavaScript, including Angular and React. It is a leading bundler that you can use to bundle a simple static site.

Let us now proceed to the steps on how to bundle a simple static site with Webpack.

The Process

Install Npm and Node

The first step is to install Npm and Node on your computer. If you don’t have Node, you can download it using a version manager or through the Node site. You can also install jQuery as well as Lightbox2 and Slick Slider, which are plugins you can use on the site to node_modules folder in the root of your project. Then, you can go to index.html on the browser and start navigating the site.

Webpack installation

The next step is the installation of Webpack. You can do this with the command below:

npm install webpack webpack-cli --save-dev

This command can install webpack and webpack CLI and place it to devDependency part of your package.json file.

Then, you need to create dist folder that contains your bundled JavaScript: mkdir dist

You can test and run webpack from the command line to know if it was properly setup. You can see if it was set up correctly. You can see the command line below:

asset bundle.js  1.04 Kib [emitted] (name: main)

./src/js/main.js 192 bytes [built] [code generated]

Webpack 5.1.3 compiled successfully in 45 ms

With this, Webpack will make a bundle.js file in the dist folder. When you see this file in your text editor, you can view the boilerplate and contents of main.js at the bottom.

Setup Automation

The next step is automating the setup. You need to make an Npm script. You can change the scripts property in package.json to look like the following:

“scripts” :{

  “test:: “echo \ “Error: no test specified\ :&& exit 1”,

  “build”: “webpack ./ src/ js/ main.js ---output - filename = bundle.js -- mode=development”

Npm will look for the module in node_modules folder automatically.

Make a Webpack Configuration File

You can make a webpack.config.js file in the project root:

touch webpack.config.js

Then, you can add the code below:

module.exports = {

entry: ‘ ,/src/js/main.js ‘ ,

mode: ‘development’ ,

output:  {

    path:   ‘${_dirname} /dist’ ,

    filename:  ‘bundle.js’  ,

 },

};

Then, you can change npm script to this line below:

“scripts”:  {

…

“build”: “webpack”

} ,

Include the Bundle

Since you already have a webpack that generates a bundle, you can include it anywhere. To do this, you can make an entry point where you can store the assets you want webpack to bundle for you. It will be a file name app.js in src/js directory:

touch src/js/app.js

You can add the line below to app.js:

     require(‘ ./main.js’ );

Change the webpack config to:

entry:  ‘./src/js/app.js’ ,

You can now run npm run build on recreating the bundle.

By following these steps, you can successfully make a simple static site using Webpack. Webpack can make it easier to minify your code. You can reduce the size, and it allows you to add assets based on your standards. It also helps to reduce the number of HTTP requests you make to the server.

Conclusion

Establishing a simple static site is easy with the use of Webpack. Meanwhile, it is also a good idea to have a react rich text editor to customize your site. TinyMCE is among the best text editors in the market today.

With the help of the steps mentioned above, you can make your static site with Webpack. Then, you can add more customization features to your site with your chosen react rich text editor.  What are you waiting for? Make your simple static site with Webpack now!