Development guide to create JavaScript app with webpack

Before starting this article I assumed that you have installed the latest version node.js, yarn/npm and visual studio code. If not download node.js from here, yarn from here, and visual studio code from here.

Basically, Webpack is a bundler rather than a task runner. It can bundle all of your JavaScript files, stylesheets images, and other files also and make them readable for browser even if it is a very old one. Now, let’s go we start our journey!

Instructions

1. Creating project infrastructure

   1. Webpack is fully configurable and the developer gets more than enough freedom to set up their app infrastructure. From my experience, I have created a standard structure so that, it can be more manageable and better lookings. So, Let’s create a folder for the project and name it webpack-demo. Create a project structure like this image.

      Open

      

       

   2. Open command prompt or PowerShell or any command-line tool you prefer and navigate to the project folder. write yarn init (for npm use npm instead of yarn) command and press enter. It will create a package.json file in the root directory. package.json will contain all of the used libraries and plugins references alongside build commands and other info about project structure.

      { "name": "webpack-demo", "version": "1.0.0", "description": "Webpack Demo", "main": "index.js", "author": "Faisal AL Mahmud", "license": "MIT" }

       

2. Configure webpack

   1. Edit package.json file and set main.js instead of index.js. Create a new object for scripts and set a property name serve to run a command for dev mode. So, package.json will be like:

      { "name": "webpack-demo", "version": "1.0.0", "description": "Webpack Demo", "main": "index.js", "author": "Faisal AL Mahmud", "license": "MIT", "scripts": { "serve": "webpack-dev-server" } }

      webpack-dev-server is a library to run the project in dev mode.

   2. Run yarn add webpack webpack-cli webpack-dev-server --save-dev to download webpack dependencies.

   3. Run yarn add html-webpack-plugin --save-dev to download to webpack html plugin.

   4. Create a file in the root directory and name it webpack.config.js. This file will contain all instructions about the project bundling and build process. Configure this file as below.

      const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); let htmlOptions = { template: './src/app/index.html', minify: { collapseWhitespace: true, removeAttributeQuotes: true } }; module.exports = { entry: './src/app/js/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: '[hash].[name].js' }, devServer: { contentBase: './src/app', hot: true, port: 4200 //port for development server }, plugins: [ new HtmlWebpackPlugin(htmlOptions) ] };

   5. Edit index.html file with minimum tags.

   6. And main.js will be

3. Now run yarn serve command and look at the console for …

   Open

   

   Navigate to http://localhost:4200/ to see our application.

    

4. Add Stylesheets

   1. Write some CSS in custom.scss file.

   2. import custom.scss file into main.js

   3. To compile CSS code we will use a plugin. MiniCssExtractPlugin is the mostly use plugin to compile CSS. Run yarn add mini-css-extract-plugin--save-dev to download it. Add two extra loaders to handle CSS code if MiniCssExtractPlugin fails. Use yarn add css-loader sass-loader --save-dev to download. Add a rules for stylesheets in config file.

   4. Now configure MiniCssExtractPlugin to set output directory for compiled CSS files.

   5. Build project (yarn serve) and see the output.

       

5. Configure Bootstrap.

   1. To configure bootstrap install bootstrap use yarn add bootstrap --save-dev command. Bootstrap has a dependency on Popper.js and jQuery. But Popper.js is now declared as deprecated and they recommend popperjs/core. And I also love to use the updated jQuery version. So, let install popperjs/core and jQuery (yarn add popperjs/core jquery --save-dev).

   2. Update styles.scss file using the following lines.

   3. Update the main.js file.

   4. Add some div with bootstrap class in index.html file.

   5. Now run yarn serve to see updates.

6. Handling files

   1. To Handling files in webpack we need a loader. In this demo, I use file-loader. Install it using yarn add file-loader --save-dev command.

   2. Add new rules to handle files in webpack.config.js.

   3. Import desired file in app.js

   4. Add an img tag in index.html

   5. Run yarn serve to see updates

7. Production build

   1. Now, our app is ready. To deploy it we need to build it for production. At first, we have to update the package.json to start the production build process. Add this snippet under serve property.

   2. Run yarn build command. A new folder will be created in the root directory name dist. Dist folder will contain compiled CSS, JS, Files, and HTML. Now it’s ready to deploy.

   3. Enjoy!

Happy coding….

Full source code is available on github.

Related articles