Start to construct a webpack-babel-react applicationi

Configure webpack

Install Webpack

npm install -D webpack webpack-cli html-webpack-plugin

Create `webpack.config.js`

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    clean: true,
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
  plugins: [new HtmlWebpackPlugin()], // This plugin will generate index.html automatic
};

Create file src/index.js

const say = () => "Hello World!";
document.body.append(say());

Test webpack with npx webpack. There'll be two file generated: dist/bundle.js and dist/index.html.

Add `package.json` scripts

{
  //...
  "scripts": {
+    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  //...
}

Now use npm run build to build a bundle.

Configure development server

Install Webpack Dev Server

npm install -D webpack-dev-server

Edit `webpack.config.js`

export.module = {
  //...
+  devServer: {
+    port: 3000,
+    static: path.join(__dirname, "dist"),
+  },
}

Add start statement to `package.json`

  "scripts": {
+    "dev": "webpack && webpack serve",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Try npm run dev, and access http://localhost:3000/ in your browser.

Configure Babel

Why use Babel?

Because Webpack usually compile for common js, css, html files. But we have JSX in React, Webpack is unable to recognize these syntax, but Babel can do this.

Install

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

Configure `babel-loader`

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.m?jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              [
                "@babel/preset-react",
                {
                  runtime: "automatic",
                },
              ],
            ],
          },
        },
      },
    ],
  },
};

Configure React

Install

// fix -D or -S

npm i -D react react-dom

Create `src/App.jsx`

export default function App() {
    let say = () => 'Hello World!';
    return (
        <h1>{say()}</h1>
    )
}

Edit `index.js`

- const say = () => "Hello World!";
- document.body.append(say());
import { createRoot } from "react-dom/client";
import App from "./App";

// Create root element
document.body.innerHTML = "<div id='app'></div>";

const root = createRoot(document.getElementById("app"));
root.render(<App />);

Resolve `xxx\src\App doesn't exist`

module.exports = {
  // ...
+  resolve: {
+    extensions: [".js", ".jsx", ".json"],
+  },
}

zenkiebear / create-webpack-babel-react Goto Github PK

create-webpack-babel-react's Introduction

Start to construct a webpack-babel-react applicationi

Configure webpack

Install Webpack

Create webpack.config.js

Add package.json scripts

Configure development server

Install Webpack Dev Server

Edit webpack.config.js

Add start statement to package.json

Configure Babel

Install

Configure babel-loader

Configure React

Install

Create src/App.jsx

Edit index.js

Resolve xxx\src\App doesn't exist

Recommend Projects

Recommend Topics

Recommend Org

Create `webpack.config.js`

Add `package.json` scripts

Edit `webpack.config.js`

Add start statement to `package.json`

Configure `babel-loader`

Create `src/App.jsx`

Edit `index.js`

Resolve `xxx\src\App doesn't exist`