手把手教你搭建 Webpack 5 + React 项目

2024-01-28 21:03:45 作者:欧亿体育

前言

在平时工作中,为减少开发成本,一般都会使用脚手架来进行开发,比如 create-react-app。脚手架都会帮我们配置好了 webpack,但如果想自己搭建 webpack 项目要怎么做呢?这边文章将介绍如何使用 webpack 5 来搭建 react 项目,项目地址在文末。

一、简单聊下 Webpack

1.1 Webpack 的好处

试想在不使用任何打包工具的情况下,我们很难在项目去使用 es6+ 新语法,TypeScript即使是新的浏览器,也不支持,更别说在项目中使用 ReactVue 了。打包工具能帮我们解决这些问题,打包工具有很多,比如 Webpack、Vite、Snowpack、Rspack 等,这里介绍 Webapck,毕竟生态圈大。

Webpack 是一个 JavaScript 应用程序的静态模块打包工具。 它可以帮我们分析项目结构,将模块打包,最终得以在浏览器中直接使用。 Webpack 有哪些好处呢?

开发环境:

  • 新特性&新语法: 像 ESNext 新特性,.less、.ts、tsx/jsx、.vue 等浏览器无法识别的格式文件d都能在开发中使用。Webpack 的 Loader 机制能帮助进行转换。
  • 模块化: 在 Webpack 中,一切皆为模块, 我们可以使用模块化编程,把复杂的程序细化为小的模块文件。
  • 模块热替换(HMR): 提供模块热替换功能, 在修改代码后,不需要重新加载整个页面,只需要替换修改的模块,从而提高开发效率。
  • Source Map: 提供了 Source Map 功能,可以将编译后的代码映射回原始源代码,从而方便我们进行调试

生产环境:

  • 性能优化:可以压缩代码,合并文件,从而减少网络请求。
  • 代码分割:可以进行代码分割,实现按需加载或者并行加载,从而减少页面加载时间,提高用户体验。
  • 缓存优化:可以根据文件内容生成 hash 值,从而实现缓存优化,减少网络请求和服务器负载。

1.2 Webpack 的基本概念

这里我们先简单熟悉下 Webpack 基本概念,下面搭建项目时都要用到。

  • entry: 使用哪个模块来作为构建的起始入口。
  • output: 最终打包后的文件放在哪里,以及如何命名这些文件。
  • loader: 是处理文件的转换器,用于对模块源码进行转换,webpack 只能识别 js、json 文件,像 css 、ts 、jsx等文件都需要通过 loader 进行转换。
  • plugin: 是一种可扩展的机制,可以打包过程中添加额外的功能。比如打包优化,资源管理,注入环境变量等。
  • mode: 对于不同的环境,我们往往需要不同的配置,通过设置 mode 参数来选择环境。

二、搭建 React 项目

上面简单介绍了 webpack,接下来开始搭建我们的项目。

2.1 项目初始化

我们使用 pnpm 来初始化一个项目(8.x 版本需要 node 在 16 + ),为什么选用 pnpm ,可以看下包管理工具 —— 更推荐的 pnpm

mkdir create-react
cd create-react
pnpm init --y
git init

2.2 安装配置 react & TypeScript

引入 reactreact-dom 和对应的类型包 @types/react 、@types/react-dom。这里使用的版本是18.2.0。

pnpm add react react-dom
pnpm add -D @types/react @types/react-dom

然后配置 TypeScript

pnpm add typescript -D

有了 TypeScript,就可以直接通过 tsc 命令生成一个 tsconfig.json 的配置文件

tsc --init

可以按照所需手动修改 ts 的配置文件。

{
  "compilerOptions": {
    "target": "ESNext",                                                                        
    "jsx": "preserve", 
    "module": "ESNext",                                                
    "moduleResolution": "node",
    "rootDir": "./src",                     
    "baseUrl": ".",                                  
    "paths": {
      "common/*": [
        "src/common/*"
      ],
      "@/*": [
        "src/*"
      ]
    },      
    "strict": true,                                 
    "sourceMap": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "importHelpers": true,
    "noUnusedLocals": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedParameters": true,
    "noEmit": true,
    "skipLibCheck": true                        
  },
  "include": ["src"]
}

接着我们创建 src 目录,在根目录创建 index.tsx,在 src 下创建 App.tsx 。

// index.tsx
import * as React from 'react'
import * as ReactDOM from 'react-dom/client'

import App from './src/App'

const root = ReactDOM.createRoot(document.getElementById('app')!)
// v18 的新方法
root.render(<App />)

// App.tsx
import * as React from 'react'

const App: React.FC = () => {
  return <div>hello 小柒</div>
}

export default App

前置准备已经做好, 接下来我们来一步一步的使用 webpack 打包 React 项目。

2.3 Webpack 相关

(1) 安装 Webpack
  • webpack 、webpack-cli :打包必备。
  • webpack-dev-server: 一个提供热更新的开发服务器,对开发阶段友好。
  • webpack-merge: 用来合并配置文件。
pnpm add webpack webpack-cli webpack-dev-server webpack-merge -D
(2) 配置 Webpack 文件

Webpack 默认读取的是 webpack.config.js 文件,但在实际开发中我们需要将生产环境和开发环境分开。我们先来整理下配置文件的目录结构,在 scripts 目录下创建三个配置文件。

修改下 package.json 中的 scripts 配置,用来简化命令。

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack serve -c scripts/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack -c scripts/webpack.prod.js"
  },

我们使用 NODE_ENV = production 来设置环境变量,为了在不同的平台上都能使用,我们使用 cross-env 来兼容,这样在不同环境下也能正确获取环境变量。

pnpm add cross-env -D

我们将一些通用的配置写在 webpack.base.js 文件里。

const path = require('path')

module.exports = {
  entry: path.resolve(__dirname, '../src/index.tsx'),
  output: {
    path: path.resolve(__dirname, '../dist'), // 打包后的代码放在dist目录下
    filename: '[name].[hash:8].js', // 打包的文件名
  },
}

webpack.dev.js 文件和 webpack.prod.js 中引入通用配置。

// webpack.dev.js
const { merge } = require('webpack-merge')
const base = require('./webpack.base.js')

module.exports = merge(base, {
  mode: 'development', // 开发模式
  devServer: {
	  open: true, // 编译完自动打开浏览器
    port: 8080,
  },
})

// webpack.prod.js
const { merge } = require('webpack-merge')
const base = require('./webpack.base.js')

module.exports = merge(base, {
  mode: 'producton', // 生产模式
})

到这里环境基本搭建好了,接下来我们就一步一步的来完善配置。

(3) 配置 babel

由于 webpack 只能识别js、json 文件, 无法识别 jsx/tsx 文件,此时如果我们尝试启动项目肯定会报错。如何让 webpack 能识别呢?此时我们就需要使用 babel-loader 来转换代码,babel-loader 可以让 webpack 在构建的时候借助 Babel 对JS代码进行转译。


注意

在线咨询 拨打电话

电话

010-67916526

微信二维码

微信二维码