How to create a React Application with Webpack - JavaScript Version

In this article, let's create a React template project, it involves ReactJS, Webpack.

https://github.com/markliu2013/react-template-js

Create a folder and initialize NPM

npm init -y

Install React

npm i react react-dom

Install Webpack

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

Create src folder and index.html, App.jsx, index.js

Install babel-loader

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

Create file babel.config.json

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

Create file webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'main.js' // the name of the bundle
    },
    // import App from './App';
    resolve: {
        modules: [__dirname, 'src', 'node_modules'],
        extensions: ['*', '.js', '.jsx']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'src/index.html' // to import index.html file inside index.js
        })
    ],
    devServer: {
        port: 3036 // you can change the port
    },
    module: {
        rules: [
            {
                test: /\.(js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                }
            }
        ]
    }
};

Blog

How to create a React Application with Webpack - JavaScript Version

Mark

Join Our Newsletter. No Spam, Only the good stuff.

Related