WebPack: Part-2

In previous blog, we have discussed the concepts of webpack setup and loaders.

In this Blog, We will be discussing on:

1. Cache Busting and plugins
2. Splitting dev and production

Cache Busting and Plugins:

Cache busting is how can we prevent certain assets like main bundle js or css bundle,  once we create separate CSS bundle.

Whenever we do some changes in code then it should generate the new hash or else the hash should be same every time even while refreshing the page. So, it means the URL gets cached if there will be no changes in code.

webpack.config.js:

const path = require("path")

module.exports = 
  { 
    entry: "./src/index.js",
    output: 
      { 
         // the first thing we can configure is file name
         filename: "vendor.[contentHash].js",
         // contentHash Will generate hash
         // where to do , where to actually split the code 
         // Import path from module which comes with node called path 
         // path.resolve(__dirname,..) : It mainly resolve absolute path to the New_folder_name   directory. Wherever the current directory is. e.x. in my lappy: /Users/Projects/ Work/webpack-work // "dist" name of the folder where we want to code be going path: path.resolve(__dirname, "New_folder_name") } }
      }
}

In my earlier blog(webpack: part 1), we were kept dist/main.js into index.html file.

But when we generate the file through hash, then we no need to include script into index.html. That can doable by using plugins.

Plugins:

Plugins used to customize the webpack build process in variety of ways.

We will talk about HTMLWebpackPlugin:

The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply your own template using lodash templates, or use your own loader.

Install HTMLWebpackPlugin

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

webpack.config.js:

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

// then we can add plugins in module: 
plugins: [new HtmlWebpackPlugin()],

Now, while doing npm start, which will create index.html inside dist folder where the script will be included automatically.

But there will be no content on the page. As previously we were taking another index.html and now its taking dist/index.html file where only script has been added not the HTML content.

Create new html file inside src folder as main.html

And copy the code of previous index.html file into main.html. Remove script tag was taken from webpack previously.

Remove:

<script src="/dist/main.js" ></script>

Now we need to tell plugin to use the template which we have created. (main.html)

webpack.config.js:

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

module.exports = 
  { 
    mode : "development"
    entry: "./src/index.js",
    output: 
      { 
         filename: "hello.js", 
         path.resolve(__dirname, "New_folder_name") } }
      },
    plugins: [
      new HtmlWebpackPlugin({ 
template: "./src/main.html"
       })
    ],
    module: 
       { 
         rules: [ 
           { 
  // files which ends with .css use the below loader 
   test: /\.scss$/,
   use: [
"style-loader", // 3rd. style loader inject styles into DOM
"css-loader", // 2nd. CSS loader turns css into common JS
"sass-loader" //1st. SASS loader which turns sass into CSS
}
         ]
     }
}

Now do npm start, we can see dist/index.html where the template will be there from main.html.

Splitting DEV and Production:

We can create two file in root as: webpack.dev.js and webpack.prod.js

And copy the code of webpack.config.js into both files.

Now, I will be making one common config file for webpack called webpack.config.js

Later, We need to merge the webpack.dev.js with webpack.config.js and webpack.prod.js with webpack.config.js

To merge the file install plugin called webpack-merge.

$ npm install —save-dev webpack-merge

webpack.dev.js:

const path = require("path")
const common = require('./webpack-config');
const merge = require('webpack-merge');

module.exports = 
 merge(common ,{ 
    mode : "development"
    output: 
      { 
         filename: "hello.js", 
         path.resolve(__dirname, "New_folder_name") } }
      }
})

webpack.prod.js:

const path = require("path")
const common = require('./webpack-config');
const merge = require('webpack-merge');

module.exports = 
  merge(common, { 
    mode : "production"
    output: 
      { 
         filename: "hello.[contentHash].js", 
         path.resolve(__dirname, "New_folder_name") } }
      }
})

webpack.config.js:

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

module.exports = 
  { 
    entry: "./src/index.js",
    plugins: [
      new HtmlWebpackPlugin({ 
template: "./src/main.html"
       })
    ],
    module: 
       { 
         rules: [ 
           { 
  // files which ends with .css use the below loader 
   test: /\.scss$/,
   use: [
     "style-loader", // 3rd. style loader inject styles into DOM
     "css-loader", // 2nd. CSS loader turns css into common JS
     "sass-loader" //1st. SASS loader which turns sass into CSS
       ]
     }}
  }

Now, we can change package.json according to dev and prod:

package.json:

"scripts": 
     {
        "start" : "webpack --config webpack.dev.js",
        "prod" : "webpack --config webpack.prod.js"
      }

Check the command by running npm start for dev and npm run prod for production.

Currently, whenever we are making changes every time we have to run npm start to build the dev. We can fix this by setup webpack dev server.

Install webpack-dev-server:

$ npm install —save-dev webpack-dev-server

In package.json:

"scripts": 
     {
       "start" : "webpack-dev-server --config webpack.dev.js",
       "prod" : "webpack --config webpack.prod.js"
      }

--open will open the browser in window for us. It works as live server. You can change the code and webpack server will automatically rebuild and refresh the browser for us.

I hope you found this blog helpful, If you have any question please reach out to me on @suprabhasupi 😋

🌟 Twitter

👩🏻‍💻 Suprabha.me

🌟 Instagram