React Training
  • React JS Library
  • Roadmap
  • Training OutLine
  • React js basics
    • Understanding React JS
    • React JS a framework?
    • Setting Up React
    • Say Hello to React
    • Everything is a Component
    • Create-react-app
  • React Building Blocks
    • JSX and Babel
    • One Way Data Flow
    • Virtual DOM
    • V of MVC
    • React Terminology
    • React Tooling
  • Day 01
    • Day 01 OutLine
    • All About JSX
    • React Tools/ npm & webpack
    • Introduction of Webpack
    • Hello world using webpack
      • Webpack Setting up with React
    • NPM Scripts | Package JSON
      • Package.json file
    • React JS Principles
      • One Way Data Flow
      • V of MVC
      • Virtual DOM
    • Create React App - Part-1
    • Create React App - Part-2
  • Day 02
    • Quick Recap
      • Quiz
    • State & Props
      • State & Props in Depth
      • State Vs Props | Compare
    • React LifeCycle Methods
      • React LifeCycle Methods for V-0.16 x
    • Constructor | Lifecycle
    • Write Flicker App | First App
  • Day 03
    • Quick Recap
    • Life Cycle Flow
      • Birth and Mounting
      • Initlization and Construction
      • Pre Mounting
      • Render Method
      • componentDidMount
    • Type of React Components
      • Examples- Quick Compare
      • Class and Functional components
      • Functional Components
    • YouTube application
      • Component Design
    • All in One LifeCycle
  • Assignment
    • React App development
  • Day 04
    • Quick Recap on Lifecycle
    • Lifecycle deprecated/New Methods
      • New Lifecycle Methods
    • Lets Build App Netflix | Mock
  • Assignment
    • Github battle App | Assignment
  • Day 05
    • Quick Recap : Hooks
    • ES6 Features | Hands-on
      • ES6 Code Examples
    • Next Stop - React Router | SPA
      • Code examples | Router
      • React Router Building Blocks
      • Application using react-router-dom
  • Day 06
    • Router V4 | Quick Recap
    • ES2015 | 16 Quick Recap
    • LifeCycle Methods -Part-1
    • LifeCycle Methods -Part-2
  • Day 07
    • Quick Recap | New Lifecycle
    • Quick Recap | React Routing
    • Context API | React JS
      • component with context APIs
      • Context API | examples
    • App using Hooks/Context APIs
  • Assignment
    • Assignments
  • State Management Day-08
    • Quick Recap
    • Managing React State
      • What is Redux
      • Understanding Redux
      • Hello World "Redux"
  • React Redux Day - 09
    • Redux State Manager
    • Redux Redux Development
    • Simple Application | Redux
  • Redux Live Application Day -10
    • Redux with existing Application
      • Redux with React App
      • Lets Build More Apps
      • Should I use Redux from Dan
    • Quick Look at JS in React
    • Learn By Reading
  • miscellaneous Items - Day 11
    • Hooks useReducer
    • Hooks useContext
    • Hooks useRef
    • Hooks useEffect
    • Hooks useState
    • Lazy Loading and code splitting
    • Styling React Component
  • React Next Step - Day 12
    • Topics
    • Jest and Enjyme Testing
    • Examples: Testing
  • React Native
    • What is React Native
    • Setting up Environment
      • Linux Systems
    • React Native Hello World App
    • React Native Architecture
    • React Native Vs Native
    • Expo Cli or React Native CLI
  • React Native core Fundamental
    • React Native "Hello World"
    • Course OutLine
    • Getting started with Expo App
    • Layout with Flexbox
    • Working with Styles and Events
    • Manging Component State and Props
    • Build Simple Task List Application
  • What to Debug & How to Debug
    • Debug React Native Application
Powered by GitBook
On this page
  • webpack 4 to Help us in React Build
  • webpack 4: getting started with zero conf
  • webpack 4: production and development mode
  • webpack 4: overriding the defaults entry/output
  • webpack 4: transpiling Javascript ES6 with Babel 7
  • webpack 4: setting up webpack 4 with React
  • webpack 4: the HTML webpack plugin
  • webpack 4 : the webpack dev server

Was this helpful?

  1. Day 01

Hello world using webpack

Lets understand webpack configurations

PreviousIntroduction of WebpackNextWebpack Setting up with React

Last updated 6 years ago

Was this helpful?

webpack 4 to Help us in React Build

webpack is powerful and has a lot of unique features but one of its pain point is the configuration file.

Providing a configuration for webpack is not a big deal in medium to bigger projects. You can’t live without one. Yet, for smaller ones it’s kind of annoying, especially when you want to kickstart some toy app.

Here’s the breaking news now: webpack 4 doesn’t need a configuration file by default!

Let’s try that out.

webpack 4: getting started with zero conf

Create a new directory and move into it:

  1. mkdir webpack-4-quickstart && cd $_

Initialize a package.json by running:

  1. npm init -y

and pull webpack 4 in:

  1. npm i webpack --save-dev

We need webpack-cli also, which lives as a separate package:

  1. npm i webpack-cli --save-dev

Now open up and add a build script:

"scripts": {
 "build": "webpack"
}

Close the file and save it.

Try to run:

npm run build

and see what happens:

  1. ERROR in Entry module not found: Error: Can't resolve './src' in '~/webpack-4-quickstart'

In brief: the entry point is the file webpack looks for to start building your Javascript bundle.

In previou versions of webpack the entry point had to be defined inside a configuration file named webpack.config.js.

Starting from webpack 4 there is no need to define the entry point: it will take ./src/index.js as the default.

Testing the new feature is easy. Create ./src/index.js:

  1. console.log(`I'm a silly entry point`);

and run the build again:

  1. npm run build

You will get the bundle in ~/webpack-4-quickstart/dist/main.js.

What? Wait a moment. There is no need to define the output file? Exactly.

In webpack 4 there is no need to define neither the entry point, nor the output file.

webpack’s main strength is code splitting. But trust me, having a zero configuration tool speeds things up.

So here is the first news: webpack 4 doesn’t need a configuration file.

It will look in ./src/index.js as the default entry point. Moreover, it will spit out the bundle in ./dist/main.js.

In the next section we’ll see another nice feature of webpack 4: production and development mode.

webpack 4: production and development mode

Having 2 configuration files is a common pattern in webpack.

A typical project may have:

  • a configuration file for development, for defining webpack dev server and other stuff

  • a configuration file for production, for defining UglifyJSPlugin, sourcemaps and so on

While bigger projects may still need 2 files, in webpack 4 you can get by without a single line of configuration.

How so?

webpack 4 introduces production and development mode.

In fact if you pay attention at the output of npm run buildyou’ll see a nice warning:

The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.

What does that mean? Let’s see.

"scripts": {
 "dev": "webpack --mode development",
 "build": "webpack --mode production"
}

Now try to run:

  1. npm run dev

and take a look at ./dist/main.js. What do you see? Yes, I know, a boring bundle… not minified!

Now try to run:

npm run build

and take a look at ./dist/main.js. What do you see now? A minified bundle!

Yes!

Production mode enables all sorts of optimizations out of the box. Including minification, scope hoisting, tree-shaking and more.

Development mode on the other hand is optimized for speed and does nothing more than providing an un-minified bundle.

So here is the second news: webpack 4 introduces production and development mode.

In webpack 4 you can get by without a single line of configuration! Just define the --modeflag and you get everything for free!

webpack 4: overriding the defaults entry/output

I love webpack 4 zero conf but how about overriding the default entry point? And the default output?

Configure them in package.json

Here’s an example:

"scripts": {
 "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
 "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}

webpack 4: transpiling Javascript ES6 with Babel 7

Modern Javascript is mostly written in ES6.

But not every browser know how to deal with ES6. We need some kind of transformation.

This transformation step is called transpiling. Transpiling is the act of taking ES6 and making it understandable by older browsers.

Webpack doesn’t know how to make the transformation but has loaders: think of them as of transformers.

babel-loader is the webpack loader for transpiling ES6 and above, down to ES5.

To start using the loader we need to install a bunch of dependencies. In particular:

  • babel core

  • babel loader

  • babel preset env for compiling Javascript ES6 code down to ES5

Let’s do it:

  1. npm i @babel/core babel-loader @babel/preset-env --save-dev

Next up configure Babel by creating a new file named .babelrc inside the project folder:

{
 "presets": [
 "@babel/preset-env"
 ]
}

At this point we have 2 options for configuring babel-loader:

  • using a configuration file for webpack

  • using --module-bindin your npm scripts

Yes, I know what you’re thinking. webpack 4 markets itself as a zero configuration tool. Why would you write a configuration file again?

The concept of zero configuration in webpack 4 applies to:

  • the entry point. Default to ./src/index.js

  • the output. Default to ./dist/main.js

  • production and development mode (no need to create 2 separate confs for production and development)

And it’s enough. But for using loaders in webpack 4 you still have to create a configuration file.

I’ve asked Sean about this. Will loaders in webpack 4 work the same as webpack 3? Is there any plan to provide 0 conf for common loaders like babel-loader?

His response:

“For the future (after v4, maybe 4.x or 5.0), we have already started the exploration of how a preset or addon system will help define this. What we don’t want: To try and shove a bunch of things into core as defaults What we do want: Allow other to extend”

For now you must still rely on webpack.config.js. Let’s take a look…

webpack 4: using babel-loader with a configuration file

Give webpack a configuration file for using babel-loader in the most classical way.

Create a new file named webpack.config.js and configure the loader:

module.exports = {
 module: {
 rules: [
 {
 test: /\.js$/,
 exclude: /node_modules/,
 use: {
 loader: "babel-loader"
 }
 }
 ]
 }
};

There is no need to specify the entry point unless you want to customize it.

Next up open ./src/index.js and write some ES6:

const arr = [1, 2, 3];
const iAmJavascriptES6 = () => console.log(...arr);
window.iAmJavascriptES6 = iAmJavascriptES6;

Finally create the bundle with:

  1. npm run build

Now take a look at ./dist/main.js to see the transpiled code.

webpack 4: using babel-loader without a configuration file

There is another method for using webpack loaders.

The --module-bindflag lets you specify loaders from the command line. Thank you Cezar for pointing this out.

The flag is not webpack 4 specific. It was there since version 3.

To use babel-loader without a configuration file configure your npm scripts in package.json like so:

  1. "scripts": {

  2. "dev": "webpack --mode development --module-bind js=babel-loader",

  3. "build": "webpack --mode production --module-bind js=babel-loader"

  4. }

And you’re ready to run the build.

I’m not a fan of this method (I don’t like fat npm scripts) but it is interesting nonetheless.

webpack 4: setting up webpack 4 with React

That’s easy once you’ve installed and configured babel.

Install React with:

  1. npm i react react-dom --save-dev

Next up add babel-preset-react:

  1. npm i @babel/preset-react --save-dev

Configure the preset in .babelrc:

  1. {

  2. "presets": ["@babel/preset-env", "@babel/preset-react"]

  3. }

and you’re good to go!

Open up webpack.config.js and configure the loader like so:

module.exports = {
 module: {
 rules: [
 {
 test: /\.(js|jsx)$/,
 exclude: /node_modules/,
 use: {
 loader: "babel-loader"
      }
     }
    ]
  }
};

To test things out you can create a dummy React component in ./src/App.js:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
 return (
   <div>
   <p>React here!</p>
   </div>
   );
};

export default App;
ReactDOM.render(<App />, document.getElementById("app"));

Next up import the component in ./src/index.js:

  1. import App from "./App";

and run the build again.

webpack 4: the HTML webpack plugin

webpack needs two additional components for processing HTML: html-webpack-plugin and html-loader.

Add the dependencies with:

  1. npm i html-webpack-plugin html-loader --save-dev

Then update the webpack configuration:

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html"
    })
  ]
};

Next up create an HTML file into ./src/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <title>webpack 4 quickstart</title>
</head>

<body>
 <div id="app">
 </div>
</body>

</html>

run the build with:

npm run build

and take a look at the ./dist folder. You should see the resulting HTML.

There’s no need to include your Javascript inside the HTML file: the bundle will be automatically injected.

Open up ./dist/index.html in your browser: you should see the React component working!

As you can see nothing has changed in regards of handling HTML.

webpack 4 is still a module bundler aiming at Javascript.

But there are plans for adding HTML as a module (HTML as an entry point).

webpack 4 : the webpack dev server

Running npm run devwhenever you make changes to your code? Far from ideal.

It takes just a minute to configure a development server with webpack.

It will automagically refresh the browser’s window as well, every time you change a file.

To set up webpack dev server install the package with:

  1. npm i webpack-dev-server --save-dev

Next up open package.jsonand adjust the scripts like the following:

"scripts": {
 "start": "webpack-dev-server --mode development --open",
 "build": "webpack --mode production"
}

Save and close the file.

Now, by running:

npm run start

you’ll see webpack dev server launching your application inside the browser.

webpack dev server is great for development. (And it makes React Dev Tools work properly in your browser)

webpack 4 is looking for an entry point in ./src! If you don’t know what that means go check out my previous article on .

webpack 4 development and production mode

Open up and fill the script section like the following:

webpack 4: transpiling Javascript ES6 with Babel
Setting up React with Parcel Bundler

As suggested by you can configure babel-loader to read .jsx files too. This is useful if you’re using the jsx extension for your React components.

Once configured will launch your application inside a browser.

package.json
switching from Gulp to webpack
package.json
Conner Aiken
webpack dev server
https://github.com/tkssharma/React-Internal-Workshop/tree/master/Day%201