Skip to content

Webpack setup

Jump to bottom
Marco E edited this page Jan 24, 2022 · 1 revision

Why should we use Webpack?... Because browsers can't understand .jsx files!

  1. Webpack is a library that uses babel (another library) to convert .jsx and ES6 files into .js files.
  2. One thing Webpack does that babel can't is it bundles set of files connected by import statements into one file. Thus the output in the gh-pages branch has only one .js file.
  3. Webpack has a tool called webpack-dev-server which allow us to create an application in a fast and convenient way.

Install Webpack, Babel and other libraries needed for bundling and transpilation

  • Generate a package.json file:
# --yes is used to generate a default package.json file.
npm init --yes
  • Install Webpack:
# You can replace webpack with webpack@4.17.2 to avoid errors (latest at the time of the demo)
npm install --save-dev webpack

IMPORTANT: Add .gitignore file, and add node_modules to it to stop indexing those files. This is important before the first commit.

  • Install other dependencies:
# Webpack related dependencies
npm install --save-dev webpack-cli webpack-dev-server

# Babel (@babel/core@7.0.0 at the time of the demo)
npm install --save-dev @babel/core

# @babel/node compiles in the command line | @babel/preset-env compiles ES6 | @babel/preset-react compiles react | @babel/register needs to be present
npm install --save-dev @babel/node @babel/preset-env @babel/preset-react @babel/register

# This package allows transpiling JavaScript files using Babel and webpack.
npm install --save-dev babel-loader

NOTE: See this answer in Stack Overflow for a difference between compiling and transpiling.

Create a .babelrc file

The .babelrc file, is a JSON file that Babel automatically checks for to define how .jsx and ES6 should be handled.

The content of the JSON file should be the following:

  • @babel/preset-env is for our ES6 compilation.
  • @babel/preset-react is for our React.
{
  "presets": [
    ["@babel/preset-env",{
      "targets":{
        "node":"current"
      }
    }],
    "@babel/preset-react"
  ]
}

Create a webpack.config.js file

The webpack.config.js file describes how our app should be bundled.

Add a webpack.config.js file with the following content:

  • entry: path.resolve(__dirname, 'src','app') indicates that the main js file is at ./src/app/index.js.
  • path: path.resolve(__dirname,'dist') indicates that the output folder will be at ./dist.
  • extensions: ['.js','.jsx'] is an array of the extensions we want Webpack to process.
  • historyApiFallback: true is a setting we have to enable if we want to use React-Router.
  • test: /\.jsx?/, means that all .js or .jsx files will be compiled.

IMPORTANT: Add dist (the output folder) to .gitignore.

const path = require("path");

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src','app'),
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    resolve: {
        extensions: ['.js','.jsx']
    },
    devServer: {
        historyApiFallback: true
    },
    module: {
        rules: [{
            test: /\.jsx?/,
            loader:'babel-loader'
        }]
    }
}

Create an index.js file

  • Add the entry file at ./src/app/index.js:
console.log("Hello world!!!");

Create an index.html file

  • You will need to add the file at the root folder:
<head>
  <title>
    My Application
  </title>
</head>
<body>
  <div id="app"></div>
  <script src="/bundle.js"></script>
</body>

Define launch scripts

  • Add the following scripts in package.json:
{
  "start": "webpack",
  "dev": "webpack-dev-server --open"
}

Run the application

# Run the dev script
$ npm run dev

2022 ModokemDev

Clone this wiki locally