什么是webpack

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

安装webpack

在文件根目录下

npm init 生成一个package.json 文件
npm i webpack --模块打包库
npm i -D webpack-cli --命令行工具
npm i -D webpack-dev-server --一个小型的静态文件服务器。使用它，可以为webpack打包生成的资源文件提供Web服务。 npm i -D html-webpack-plugin -- 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。生成的packsge.json 文件

{
  "name": "zerotoone",
  "version": "1.0.0",
  "description": "git init \r 生成一个packjson",
  "main": "index.js",
  "dependencies": {
    "@babel/core": "^7.14.8",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "init": "^0.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "webpack": "^5.47.1"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.3.2",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2",
    "webpack-server": "^0.1.2"
  },
  "scripts": {
    "start": "webpack serve",
    "build": "rm -rf dist/ && webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

在根目录下创建webpack.config.js 文件

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

module.exports = {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: ['babel-loader'],
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

安装相关babel

Babel 是一个 JavaScript 编译器，能将 ES6 代码转为 ES5 代码，让你使用最新的语言特性而不用担心兼容性问题

npm i @babel/core --转译ES2015+的代码
npm i @babel/preset-react

在根目录下创建以一个.babelrc

{
    "presets": [
        [
            "@babel/preset-react",
            {
                "runtime": "automatic" 
                // 这一行可以在rect hook 版本里不引入import React from 'react'
            }
        ]
    ]
}

安装react

npm i react
npm i react-dom

在src 文件夹里创建一个html 文件，创建一个index.js 文件，一个app.jsx 文件

html文件

主要目的，写入一个入口

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id='root'></div>
</body>

</html>

index.js 文件

import ReactDom from 'react-dom';
import App from './App.jsx';

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

app.jsx 自定义文件

import React from 'react';
export default () => {
    return <div>
        this is a page
    </div>
}

总结

以上就是从空文件到创建了一个基于react+webpack 开发的文件夹，你可以根据你的习惯开发你的项目啦

webpack5从0到1搭建一个react项目的实现步骤| 8月更文挑战