What Is Webpack In React

Webpack participate major role in React. As React JS is java script library which used handle client side as well as server side operation. These operations will increase load on client side application and to loose it burden react introduce webpack. So, lets explore about "webpack".

React - webpack

 

Webpack is a module bundler for modern Java script applications. It takes modules with dependencies and generates static assets representing those modules. 

 

When webpack processes the application it recursively builds a dependency graph which includes every module that application needs and then converts all those modules into a small number of bundles — generally only one of those bundles to be loaded in browser. 

 

It is highly configurable. Below are  a few of th major core concepts of webpack we cover.

• Entry
• Output
• Loaders
• Dev Server (webpack-dev-server)
• Plugins

Entry

• This is the starting point of graph which Webpack creates for all application dependencies. This entry point tells webpack where to start and follows the graph of dependencies to know what to bundle.
• Entry point is define in “webpack.config.js” file using entry attribute of module.exports method .

Example

module.exports =
{
   entry: "./src/index.js"
}

Output 

• Once all assets are bundled together, you need to tell webpack where to bundle your application.
• The output property tells webpack how to treat bundled

Example in webpack.config.js

module.exports = {
    entry: "./src/index.js"
    output: {
        path: "Idist/assets",
        filename: "bundle.js",
        publicPath: "assets"
    }
}

Loaders

• Intention to have all the assets in project to be webpack's concern and not the browsers.
• Webpack treats every file (html, .css, .scss. jpg etc.) as a module, though webpack only understand java script.
• Loaders have two purposes in webpack.config file
• Identify what files should be transformed by a certain loader. ("test" property)
• Transform that file so that it can be added to dependency graph (and eventually bundle). ("loader" property)
• Loaders in webpack transform every file into modules as those are added to the dependency graph. 

Example

module.exports = {
    module: {
        loaders: [{
            test: /\.(js|jsx)$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
                presets: ('es2015', •react, 'stage-Ol']
            }
        }, ]
    }
}

Dev server – webpack-dev-server

• It can be used to quickly develop an application.
• It provides you with a server and live reloading.
• By default, it will save the files in the current directory, unless developer manually configure a specific content base. Inline mode (a small webpack-dev-server client entry is added to the bundle which refreshes the page on change) 

Example

module.exports = {
    devServer: {
        inline: true,
        contentBase: './dist',
        port: 8080
    },
};

Plugins

• Loaders only execute transforms on a per-file basis, plugins are most used (but not limited to) performing actions and custom functionality on "compilations" or "chunks" of your bundled modules.
• Webpack has a rich plugin interface. Most of the features within webpack itself use this plugin interface. This makes webpack flexible.

Example

query: {
    presets: Ces2015 ', '
    react ', •stage-m,
    plugins: ['react-html-attrs'],
}