Webpack is a static module bundler for modern JavaScript applications. It creates a dependency graph to map every module the project needs and generated one or more bundles.

The core concepts of webpack to get started are:

• entry
• output
• loaders
• plugins
• mode

Entry

As the name suggests, this is the entry point that webpack will use to start building the dependency graph. By default, webpack searches for the index.js file as the entry point, but if we want to provide a custom entry point, then we can do so in the webpack.config.js file. Webpack allows us to have multiple entry points which are very useful for code splitting.

//webpack.config.js
module.exports={
    entry:'./src/index.js'
}

We tell webpack that start making the dependency graph from index.js and whenever webpack encounters an import statement, it looks for the file and maps it to the dependency graph and modes in the same manner for each import statement.

Output

The output property tells webpack where to keep the bundles generated by it. By default, webpack keeps the main file in main.js inside a folder named dist. Similarly, any other file generated will be kept inside the same folder. We can specify our output file in the webpack.config.js like this:

const path = require('path'); 
module.exports = {
 entry: 'src/index.js', 
 output: {
     path: path.resolve(__dirname, 'dist'), 
     filename: 'file-name.bundle.js', 
 }, 
}; 

path. resolve(), will create a dist folder in the same directory as our webpack.config.js. The filename is the name of our output file that will be created by webpack.

Loaders

Loaders are used by webpack to handle files other than JavaScript and JSON. These loaders convert the files into valid JavaScript which can be understood by webpack and added to the dependency graph to be used in the project.

One example is CSS files, to handle these we need loaders like html-loader, css-loader and style-loader. Twi important properties of loaders are:

• test - this will identify which type of files need to be transformed
• use - In this we provide the loaders which should be used to transform the files

module: {
    rules: [
        {
            test: /\.css$/, 
            use: ["style-loader", "css-loader"], 
        }, 
    ], 
}

Here, we use css-loader to transform our CSS into valid JavaScript and then it returns us the valid CSS. style-loader is used to insert this CSS into the DOM.

Our Amazing Sponsors

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

Plugins

Plugins can be used with webpack to provide some extra features like bundle optimization and asset management. Plugins can be used by using require() and then adding them to the plugins array. The most commonly used plugin is html-webpack-plugin which is used to generate an HTML file and automatically inject the generated bundle files in it.

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

module.exports={
    plugins: [new, HtmlWebpackPlugin
             ({template: './src/index.html'})], 
}

Here, we use the HTML plugin to generate an HTML file and we give it a template that acts as a sketch of how we want our HTML to be structured. This will also inject our bundled js files to HTML automatically, so we don't have to specify it manually.

Mode

We can define the mode of development in our webpack.config file to either development or production. By default it's production, we can change it using the mode parameter. We can also have two different config files for production and development modes.

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

module.exports = {
    mode: "development", 
    plugins: [new, HtmlWebpackPlugin]
            ({template:'./src/index.html'}), 
}

Thanks For Reading.