Webpack tutorial || How to configure Webpack.config.js.

before Webpack.config.js we need to understand what is Webpack. Webpack is a module bundler. which is used to configure or make our javascript browser understandable like ES2015, ES6 and JSX file into vanilla JavaScript.

Why we use Webpack.config.js

  • Webpack takes all of our assets and outputs them to a production-ready bundle.
  • Bundles JavaScripts into one file.
  • Minimize http requests.
  • Convert JSX or ES2015 or ES6 into vanilla JS which browsers understand.

Preretirement to use Webpack

We need machine ready for nodeJS. If you are ready with nodeJS let’s come to hit commands.

Installing Webpack globally

npm install webpack -g

Now create a file inside your root directory with name “webpack.config.js”

To convert all javascript file in a single javascript file or a bundle.

var path = require('path');

module.exports = {

    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist') + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    }
}

Loaders:

perform transformations like Bable loaders transform ES2015 or JSX into vanilla JS. more many like SASS.

Install Bable loaders using the command.

npm install balbel loader --save-dev

Config loader into Webpack.config.

    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            }
}

Install Cloaderder and style loader

npm install css-loader style-loader --save-dev

Config CSS and style loader into Webpack.config.js.

{
                test: /\.css$/,
                loader: 'style-loader!css-loader'
}

So finally we configure the complete Webpack.config file so the complete code will look like below code.

var path = require('path');

module.exports = {

    entry: path.resolve(__dirname, 'src') + '/app/index.js',
    output: {
        path: path.resolve(__dirname, 'dist') + '/app',
        filename: 'bundle.js',
        publicPath: '/app/'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
};

jquery practice test

Add a Comment

Your email address will not be published. Required fields are marked *

nineteen − 1 =