Webpack.config.js – AppDividend https://appdividend.com Latest Code Tutorials Mon, 08 Jul 2019 05:29:24 +0000 en-US hourly 1 https://wordpress.org/?v=5.2.3 https://appdividend.com/wp-content/uploads/2017/08/cropped-ApDivi-32x32.png Webpack.config.js – AppDividend https://appdividend.com 32 32 Beginner’s Guide To Setup React v15.4.2 Environment https://appdividend.com/2017/03/29/beginners-guide-to-setup-react-v15-4-2-environment/ https://appdividend.com/2017/03/29/beginners-guide-to-setup-react-v15-4-2-environment/#comments Wed, 29 Mar 2017 11:35:44 +0000 http://localhost/final/?p=65 Setup React Environment

Hello, Web Developers.  In today’s AppDividend Tutorial, I have briefly described Beginner’s Guide To Setup React Environment in our local machine. React.js is an open-source JavaScript framework for building user interfaces developed at Facebook. Airbnb, Instagram, Flipkart are using React.js for the frontend. So Let’s Get Started!! I  am assuming that you have already install node.js in your machines. Setup React Environment Step […]

The post Beginner’s Guide To Setup React v15.4.2 Environment appeared first on AppDividend.

]]>
Setup React Environment

Hello, Web Developers.  In today’s AppDividend Tutorial, I have briefly described Beginner’s Guide To Setup React Environment in our local machine.

React.js is an open-source JavaScript framework for building user interfaces developed at Facebook.

Airbnb, Instagram, Flipkart are using React.js for the frontend.

So Let’s Get Started!!

I  am assuming that you have already install node.js in your machines.

Setup React Environment

Step 1: Create a project folder in your directory.

mkdir react-environment

Navigate to that folder.

cd react-env

Step 2: Create a package.json file to manage all the node dependencies.

For initialization of this file, type following NPM command in your terminal.

npm init

So, your package.json file looks like this.

{
  "name": "react-environment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "KRUNAL LATHIYA",
  "license": "ISC"
}

Step 3: Install webpack and webpack-dev-server.

We need two things

  1. Webpack: to bundle all of our javascript files into one file and host that file on the server.
  2. Webpack Development Server: We need this server to recompile our main javascript file every time we change and provide us one server.

Install locally for our project type

npm install webpack webpack-dev-server --save-dev

Step 4: Create index.html file.

Create a new file in the root folder called index.html

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React v15.4.2 ES6 Environment</title>
</head>
<body>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

Here we have included only one javascript file called bundle.js in our HTML page, which is bundled by Webpack.
Create a directory called app in the root folder.

In the app directory, create a new javascript file called app.js.

Write only one line of code in the main.js file.

// main.js

console.log('Inside app folder');

Step 5: Configure webpack.config.js file in a root directory.

In the webpack.config.js file, we need to export all the webpack settings by exporting javascript object.

//webpack.config.js

module.exports = {
    entry: ['./app/main.js'],
    output: {
        filename: 'bundle.js'
    }
};

Here we need some explanations right?

Basically, the module.exports export an object, which describes our webpack configuration for our object.

The object contains two properties.

entry: – which represents our entry javascript file for the project. In our case It is  js6 > app > main.js

output: – the output bundled file, which we have to include in our main HTML file called bundle.js

Go to the package.json file and edit the following JSON property.

"scripts": {}

We add a new property  called “build” and value called “webpack-dev-server.”

{
  "name": "react-environment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC"
}

Go to the terminal in your root project folder and type following command.

npm run build

It will create a bundled javascript file called “bundle.js.”

Next, we need to configure Babel.js in our webpack environment.

Step 6: Install and set Babel dependencies.

npm install babel-core babel-loader babel-preset-es2015 --save-dev

It will update our package.json file.

{
  "name": "react-environment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

babel-core and babel-loader is the dependency, which transpile the ES6 code to ES5

babel-preset-es2015 let us use some advanced feature of ECMAScript in our web applications.

Update our webpack.config.js file.

webpack.config.js file looks like this.

//webpack.config.js

module.exports = {
    entry: './app/main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        port: 3000
    }
};

Here we have added module object, which has loaders property.

It will accept an array of loader configuration, like which loader we want to use and which file we have to test with the extension .js and which file we need to exclude from transpiling from es6 to es5 like “node_modules” folder.

Also, I have added one optional attribute called devServer.

It includes the port number on which we need to host our app. by default webpack-dev-server provides port 8080.

But we can change it and put port 3000.

So now when you run again command

npm run buid

The app will be running on http://localhost:3000

#Step 7: Install And Configure React and ReactDOM.

npm install --save react react-dom

We also need to use the package called “babel-preset-react” and “babel-preset-stage-3” to use the latest ES6 features as well as we can write react code in ES6 syntax.

npm install --save-dev babel-preset-react babel-preset-stage-3

Your package.json file is updated and will look like this.

{
  "name": "react-environment",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-3": "^6.22.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  }
}

We need to create one file in the root directory called .babelrc

This file contains one object configuration which includes which Babel configuration of the array we are using.

{
  "presets": ["es2015", "react", "stage-3"]
}

#Step 8: Create a component file App.js inside components folder.

Create one directory inside an app folder called components

In that create one file called App.js (react-environment > app > components > App.js)

//App.js

import React, { Component } from 'react';
export default class App extends Component {
    render(){
        return (
            <div>
                Hello From React v15.4.2
            </div>
        );
    }
}

#Step 9: Import App.js file into the main.js file.

We need to import this file into our main.js file.

//main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('app'));

Our final application directory structure looks like this.

Beginner's Guide To Setup React v15.4.2 Environment123

The main.js  is the file, which will be transpile by Babel and bundled by webpack.

You can restart your server and type the following command.

npm run build

Open the browser and go to this URL:  http://localhost:3000

“Hello From React v15.4.2.”

This code you can find in Github URL: https://github.com/KrunalLathiya/react-v15.2.4-environment

Now your React Application is running on your port 3000 with all ECMAScript’s Latest features.

Note:  If you find any error during this small setup,

  1. First, check your Node and NPM versions
  2. Check off your dependencies version by comparing the package.json file with yours because you might end up with downloading another version of that particular dependencies.

If you have any questions, please ask in a comment below. I am happy to help you out.

The post Beginner’s Guide To Setup React v15.4.2 Environment appeared first on AppDividend.

]]>
https://appdividend.com/2017/03/29/beginners-guide-to-setup-react-v15-4-2-environment/feed/ 14
Beginner’s Guide To Setup ES6 Development Environment https://appdividend.com/2017/03/28/beginners-guide-to-setup-es6-development-environment/ https://appdividend.com/2017/03/28/beginners-guide-to-setup-es6-development-environment/#comments Tue, 28 Mar 2017 15:55:03 +0000 http://localhost/final/?p=14 Beginner’s Guide To Setup ES6 Development Environment

Hello, Web Programmers. Beginner’s Guide To Setup  ES6 Development Environment. To setup es6 development environment in local machine, we need to understand two tools. Babel Webpack Babel Babel is a transpiler that just converts the code from ES6 to ES5 to support all modern browsers. For more information, please visit this official BabelJS website. https://babeljs.io/ Webpack Webpack is module […]

The post Beginner’s Guide To Setup ES6 Development Environment appeared first on AppDividend.

]]>
Beginner’s Guide To Setup ES6 Development Environment

Hello, Web Programmers. Beginner’s Guide To Setup  ES6 Development Environment.

To setup es6 development environment in local machine, we need to understand two tools.

  1. Babel
  2. Webpack

Babel

Babel is a transpiler that just converts the code from ES6 to ES5 to support all modern browsers.

For more information, please visit this official BabelJS website. https://babeljs.io/

Webpack

Webpack is module bundle for modern javascript web applications. Using webpack, we do not host multiple javascript files. We just host one file for an entire web application.

Let us take an example, for our project we only include only one javascript file.

For More information, please visit this official Webpack website. https://webpack.github.io/docs/

If you are taking this demo, then have already installed the Node.js in your machines.

Setup ES6 Development Environment

Step 1: Create a project folder.

Create an empty project folder.

mkdir js6

Navigate to that directory by typing,




cd js6

Step 2: Create a package.json file.

We need to create a JSON file called package.json

npm init

Your package.json file looks like this.

{
  "name": "js6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "KRUNAL LATHIYA",
  "license": "ISC"
}

Step 3: Install webpack globally and locally.

We need to install webpack globally.

For Windows, open a command prompt in administrator mode.

npm install -g webpack

For Linux or Mac.

sudo npm install -g webpack

We need to install webpack locally.

npm install webpack --save-dev

Here, we have used –save-dev flag.

The reason behind is that we need to install this dependency for the development setup, not for production setup.

Step 4: Include bundled file in the HTML page.

Create an index.html file in root folder.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES2015 Environment</title>
</head>
<body>
</body>
</html>

Now, include a script tag in your body tag.

<!-- index.html -->

<script src="bundle.js" type="text/javascript"></script>

Create a new directory called app in the root folder.

In that create a javascript file called main.js

For testing write only one line of code in main.js file

//main.js

console.log('Inside main.js');

Step 5: Create a webpack configuration file.

Now, create a webpack configuration file in a root folder named as webpack.config.js

In this file, we need to export all the webpack settings by exporting javascript object.

//webpack.config.js

module.exports = {
    entry: ['./app/main.js'],
    output: {
        filename: 'bundle.js'
    }
};

Here we need some explanations right?

module.exports : It is an object that describes our webpack configuration.

The object contains two properties, which is very basic configuration.

entry: – which represents our entry javascript file for the project. In our case It is  js6 > app > main.js

output: – the output bundled file, which we have included in our main HTML file called bundle.js

We need to update package.json file’s scripts property.

"scripts": {}

We add new properties called “build” and value called “webpack“.

{
  "name": "js6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC"
}

Run the build command again.

npm run build

It will create a bundled file names as “bundle.js“.

Now open an index.html file in a browser, and you will see in the chrome developer tools,  inside console panel, there is logging by saying

Hello from main.js.”

Cool!!, we have successfully bundled out main.js file into the bundle.js file, and if you open that file, we can see ES5 code.

Now, change the content of the main.js file and refresh the page.

Console panel output will remain the same.

To overcome this problem.

We need to a package called “webpack-dev-server“.

Step 6: Install webpack development server.

To get webpack-dev-server globally on Linux and Mac.

sudo npm install -g webback-dev-server

To get webpack locally

npm install --save-dev webpack-dev-server

We need to update the package.json file.

"build": "webpack-dev-server"

That’s it!! Now start your webpack by typing

npm run build

Now analyze the terminal, It says that your project will serve on http://localhost:8080

You will see the console panel result that we will get the same thing.

Hello from main.js

Now change the main file like “Hello from bundle.js“.

It will recompile automatically, and you can see the changes are reflecting in the browser.

Step 7: Use Babel in our development environment.

Now, we need to configure Babel.js in our webpack environment.

Download some dependencies from NPM.

npm install babel-core babel-loader babel-preset-es2015 --save-dev

It will update our package.json file.

{
  "name": "js6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack-dev-server"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

 

babel-core and babel-loader is the dependency, which transpiles the es6 code to es5

babel-preset-es2015 let us use some advanced feature of ECMA Script in our web applications.

Now, we have to update our webpack.config.js file.

Step 8 : Edit webpack.config.js file.

Updated webpack.config.js file looks like this.

//webpack.config.js

module.exports = {
    entry: './app/main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }
        ]
    },
    devServer: {
        port: 3000
    }
};

Here we have added module object, which has loaders property.

It will accept an array of loader configuration, like which loader we want to use and which file we have to test with the extension .js and which file we need to exclude from transpiling from es6 to es5 like “node_modules” folder.

I  have added one optional attribute called devServer.

It includes a port number on which we need to host our app. by default webpack-dev-server provides port 8080.

We can change it and put port 3000.

Please close the server and type below in terminal.

npm run buid



An App will be running on http://localhost:3000/

Our final directory structure will look like this.

Beginner’s Guide To Setup ES6 Development Environment

Step 9: Write ES6 code into our main.js file.

Now test one ECMA Script Feature called Arrow Function

You will have to open a main.js file and write below code.

Beginner’s Guide To Setup ES6 Development Environment

//main.js

let app = (name) => {
    console.log(`hello from ${name}`);
}
app('Krunal');

You will see in the browser that, it has been updated and in the console, we can see “hello from Krunal.”

We have built an environment to write ES6 code, and It will be compatible with today’s browser.

This code you can find in my GitHub URL: https://github.com/KrunalLathiya/es6-environment

Possible Errors

  1. First, check your Node and NPM versions
  2. You need to check all of your dependencies version by comparing package.json file to avoid version conflicting.

If you have any questions, please ask in a comment below. I am happy to help you out.

Finally, we have achieved setup es6 development environment in the local machine.

The post Beginner’s Guide To Setup ES6 Development Environment appeared first on AppDividend.

]]>
https://appdividend.com/2017/03/28/beginners-guide-to-setup-es6-development-environment/feed/ 15