Web Development

Start using Webpack and Babel by ON April 22 2019

This post may help you to setup the Webpack and Babel for your project. It is an inital level of setup so you may get the idea of start with it.

  1. First, need nodejs and npm for setup
    sudo apt-get install nodejs
    npm install --save
  2. Create dir and move on same ( Don’t use directory name same as Webpack )
    mkdir my-app
    cd my-app

Follow the below steps and now install dependencies for webpack and babel.

npm init --yes

Above line of script create below package.json file with minimal required resouces.

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Install Webpack and Babel:- npm i -D webpack @babel/core babel-loader

Install webpack-cli :- npm i -D webpack-cli

Create src directory mkdir src and index.js file within this directory. Add some functionality in this file.

Create a file name webpack.config.js and copy paste below code

const path = require( 'path' );    
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve( __dirname, 'dist' ),
        filename: 'main.js',
        },
        // Ensures that whenever it finds a js file , it uses babel-loader to convert it to ES6
        module: {
        rules: [
            {
            test: /\.js$/,
            use: 'babel-loader',
            }
        ]
        }
    };

Add these scripts into package.json

"scripts": {
        "dev": "webpack --watch --mode=development",
        "prod": "webpack --watch --mode=production"
        },

Now run npm run dev . After success run one dir name as dist with main.js will be created.

Use above file in your web page and add below line

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

If you want to use style sheet in Webpack you need to install loader using below command

npm i -D style-loader css-loader

And add this below rules in webpack.config.js

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

Create your CSS file for style and add it into the index.js by importing
import url('css_file_path_here');

Note : – Whenever add any thing in index.js or stylesheet run below during development.

npm run dev

Before deploy the application run command for production.

npm run prod

Basic concept Webpack config:-
1. context: – The base dir related to what Webpack will look for assets.
2. entry:- A starting point from where Webpack starts to a building ( input files ).
3. outputs: -It contains minimal output files and builds.
4. modules: – Add all loader rules and test.

Thank you :>)

author's avatar ALL POST
Knowledge contribution is better than any contribution.
LEAVE A COMMENT

Leave a Reply

Your e-mail address will not be published. Required fields are marked *