Create a ReactJs Webpack project manually without create-react-app

#react #webpack #frontend

Step 01: Initialize the Project

mkdir RW
cd RW
npm init -y

Step 02: Install Dependencies

npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react
npm install --save-dev html-webpack-plugin
npm install --save-dev css-loader style-loader

Step 03: Create Project Structure

mkdir public
cd public/
touch index.html
cd ..
mkdir src
cd src
touch index.js
touch App.js
cd ..
touch .babelrc
touch webpack.config.js
touch package.json

public/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

src/index.js:

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

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

src/App.js:

import React from 'react';

const App = () => {
  return <h1>Hello React with Webpack!</h1>;
};

export default App;

.babelrc:

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

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: 'bundle.js',
    clean: true,
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    })
  ],
  devServer: {
    static: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    open: true,
  },
};

Update package.json:

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

Run:

npm start

Your React app will be available at http://localhost:3000

That's it.

DEV Community

Create a ReactJs Webpack project manually without create-react-app

Top comments (0)