webpack5 从 0 到 1 创建一个最简单的 react 项目

一、项目初始化

新建文件夹，作为项目根路径

// 创建文件夹
mkdir Demo

// 删除文件夹
rm -rf Demo

限定项目 node 版本

// 创建文件
touch .nvmrc

// 版本
22.13.0

初始化 package.json

// 此行为会生成一个包含 name、version、main、license 的对象
yarn init -y

安装 webpack、webpack-cli、webpack-dev-server、html-webpack-plugin、typescript、ts-loader

// 仅在开发环境构建项目
yarn add webpack webpack-cli webpack-dev-server html-webpack-plugin typescript ts-loader -D

安装 react、react-dom、@types/react、@types/react-dom

// 需要作为依赖
yarn add react react-dom @types/react @types/react-dom

二、webpack 基本配置

根目录下新建 webpack.config.js、src/index.js、public/index.html、tsconfig.json

touch webpack.config.js
touch tsconfig.json

mkdir src
touch src/index.js

mkdir public
touch public/index.html

webpack.config.js

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

module.exports = {
  // 环境
  mode: 'development',
  devtool: 'cheap-module-source-map',
  // 入口
  entry: {
    index: './src/index.tsx'
  },
  // 出口
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'webpack 搭建 react 项目',
      template: path.resolve(__dirname, './public/index.html'),
      filename: 'index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  // 启动
  devServer: {
    // 启动是否自动打开网页
    open: true,
    // 模块热更新
    hot: true,
    // 端口号
    port: 8888
  },
  resolve: {
    // 配置能够被解析的文件扩展名
    extensions: ['.mjs', '.js', '.ts', '.tsx', '.json', '.jsx']
  }
}

src/index.js

// react 18 之后的写法
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// react 18 之前的写法
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

public/index.html

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

<head>
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

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

</html>

tsconfig.json

{
  "compilerOptions": {
 "outDir": "./dist/",
 // "rootDir": "./src",
 "sourceMap": true, // 开启 sourcemap
 "module": "commonjs",
 "target": "es5",
 "jsx": "react",
 "esModuleInterop": true,
 "allowJs": true,
 "strict": true
  }
}

三、启动构建脚本

在 package.json 中添加脚本

{
// ...
"scripts": {
    "start": "webpack serve",
    "build": "webpack",
    "watch": "webpack --watch"
}
// ...
}

四、完成启动

yarn start

webpack5 从 0 到 1 创建一个最简单的 react 项目

webpack5 从 0 到 1 创建一个最简单的 react 项目

一、项目初始化

二、webpack 基本配置

三、启动构建脚本

四、完成启动

起风了

引用和评论

腾讯新闻中心首页改版啦

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号

2024最全ECharts 实战大全（速记版+资源）