Getting started with Webpack

Webpack is a module bundler. The main purpose of webpack is to bundle JS/CSS/Image and other files to one file and serve it to the browser. The core features of webpack that one might know are entry, output, mode, loaders, plugins, environment etc. In this article, i’m going to explain those,

#mode: This could be production or development.

#entry: The entry file of the project. You can set multiple entry files as well. Say, the index.js is the starting point of a react app. Ex,

entry: [
  path.resolve(__dirname, "src/index.js"),
  path.resolve(__dirname, "src/index2.js")
]

#output: In the output section, we can set the file path where we will get the bundle. Output can have multiple properties,

• path : The path-name of the folder
• filename: Filename of the bundled file. we can automatically generate contentHash (will generate unique hash for the array of entries) in the filename. Ex : filename: "[name][contenthash].js"
• clean: boolean (True means deleting the previous build file if there is an updated one. Default is false). Ex: filename: "[name][contenthash].js"
• assetModuleFilename: "[name][ext]". It refers to the image extension with proper name otherwise image/file will set an random name with extension. Ex : assetModuleFilename: "[name][ext]"

output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name][contenthash].js", // contentHash will generate 
                unique hash
    clean: true, // Delete previoud build options
    assetModuleFilename: "[name][ext]" // Add those to add media in 
            webpack files with same name or it will give wired name
}

#devtool: "source-map". It will create a source map in the console where we can debug things easily.

#devServer: We can run the dev-server with webpack with our specific port and other options like hot reload, compressing etc. Some options are given bellow,

#module: This is the section where we can set the rule for our build folder. Without setting the rules we cannot get css/images etc in our bundle. It will say loading error. Rules will be an array of objects where there will be two required properties, test and use. In the test section we will define our filename (regex also) and in the use section (Array) we will set the packages we want to use. One quick note, in the use array, the loading file will work into reverse order, In the bellow example, first rule is set for css/scss compile (otherwise js will not recognize css) and the second one is set for images (will not recognize images).

#plugins: We can use our necessary plugins into this section. It will accept an array of plugins as well.

To know more about webpack, Click here. If you want to know about some useful plugins, click here.