从零开始搭建前端开发环境：一个完整指南

在现代的前端开发中，搭建一个稳健、高效的开发环境至关重要。本篇博客将向你介绍如何从零开始搭建一个完整的前端开发环境，基于webpack5+react18+ts

工具

搭建开发环境，肯定用到了工具

安装必要的工具，这里我所用到的工具有 vscode，ts，以及nodejs，还有包管理工具以及运行构建任务pnpm，这里是个人觉得这个 包管理工具好用，当然这个包管理工具是可以更换的，看到这篇博客的小伙伴可以更换成自己常用的包管理工具

pnpm安装

注意这个命令是安装在全局的！

npm i pnpm -g

创建新项目

接着就是初始化项目了，使用以下这个命令来初始化项目

pnpm init

这样你的根目录下就生成一个 package.json 文件，这个文件可以看到我们安装的依赖的版本，以及后续写一些比较长的命令就可以把这个命令放进package.json中，对我们也是方便了不少

配置webpack

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。它主要用于处理前端资源文件，例如 JavaScript、样式表和图片，将这些文件按照依赖关系打包成最终的静态资源，它是一个良好打包工具，所以开始配置webpack

一共分为三个文件，在build文件下

1.安装webpack依赖

pnpm i webpack webpack-cli -D

2、安装React依赖：

pnpm i react react-dom -S

3、安装react类型依赖：

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

4、在public/index.html添加内容：

5、在tsconfig.json添加内容：

{
    "compilerOptions": {
        "target": "ESNext",
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": false,
        "skipLibCheck": false,
        "esModuleInterop": false,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react" 
    },
    "include": ["./src"]
}

6、在src/App.tsx中添加内容：

import React from 'react'

export default function App() {
    return (
        <div>
            <h2>webpack-react-ts</h2>
        </div>
    )
}

配置基础版React + TS环境

1、修改webpack公共配置 —— webpack.base.js

1.1配置入口文件：

const path = require("path")

module.exports = {
    entry:path.join(__dirname,"../src/index.tsx"),//入口文件
}

1.2配置出口文件：

const path = require("path")

module.exports = {
    // ...
    //打包文件出口
    output:{
        filename:"static/js/[name].js",//每个输出的js文件的名称
        path:path.join(__dirname,"../dist"),//打包结果输出的路径
        clean:true,//webapck5内置的，webpack4中需要配置clean-webpack-plugin来删除之前的dist
        publicPath:"/"//打包后文件的公共前缀路径
    }
}

1.3配置loader解析TS和JSX

webpack默认只能识别js文件，不能识别jsx和ts语法，需要配置loader的预设@babel/preset-typescript来先将TS语法转化成JS语法，再通过@babel/preset-react来识别jsx语法

安装babel核心模块:

pnpm i babel-loader @babel/core @babel/preset-react @babel/preset-typescript -D 

在webpack.base.js中添加module.rules配置：

module: {
    rules: [
      {
        test: tsRegex, // 匹配ts和tsx文件
        use: [
          // 开启多进程打包。
          // 进程启动大概为600ms，进程通信也有开销。
          // 只有工作消耗时间比较长，才需要多进程打包
          {
            loader: 'thread-loader',
            options: {
              wokers: 4, // 进程数
            },
          },
          'babel-loader',
        ],
      },

配置extensions:

extebsions是webpack的resolve解析配置下的选项，在==引入模块时不带入文件后缀==的时候，会在该配置数组中依次添加后缀查找文件。因为ts不支持引入以.ts、.tsx为后缀的文件，所以要在extensions中要配置，在很多第三方库中里面很多引入js文件且没有带后缀，所以也要配置下js。

 resolve: {
    extensions: ['.js', '.tsx', '.ts'],
  }

添加html-webpack-plugin插件

npm i html-webpack-plugin -D

在webapck.base.js中只用html-webpack-plugin:

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    // ...
    plugins:[
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,"../public/index.html"),//模板用定义root节点的模板
            inject:true//自动注入静态资源
        })
    ],
}

在这里，一个基本的react公共配置就差不多了，然后我们在此基础上分别进行配置开发环境和打包环境

webpack开发环境下的配置

        安装webpack-dev-server

npm i webpack-dev-server -D

还需要依赖webpack-merge来合并基本配置，安装依赖：

npm i webpack-merge -D

修改webpack.dev.js的内容，合并公共的配置，然后添加在开发模式下的配置：

import path from 'path'
import { merge } from 'webpack-merge'
import { Configuration as WebpackConfiguration } from 'webpack'
import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'
import baseConfig from './webpack.base'

interface Configuration extends WebpackConfiguration {
  devServer?: WebpackDevServerConfiguration
}
// 合并公共配置,并添加开发环境配置
const devConfig: Configuration = merge(baseConfig, {
  mode: 'development', // 开发模式,打包更加快速,省了代码优化步骤
  devtool: 'eval-cheap-module-source-map', // TODO devtools 配置
  devServer: {
    host: '127.0.0.1',
    port: '8082',
    open: true, // 是否自动打开
    compress: false, // gzip压缩,开发环境不开启，提升热更新速度
    hot: true, // 开启热更新
    historyApiFallback: true, // 解决history路由404问题
    setupExitSignals: true, // 允许在 SIGINT 和 SIGTERM 信号时关闭开发服务器和退出进程。
    static: {
      directory: path.join(__dirname, '../public'), // 托管静态资源public文件夹
    },
    headers: { 'Access-Control-Allow-Origin': '*' }, // HTTP响应头设置，允许任何来源进行跨域请求
  },
})
export default devConfig

在package.json的script中添加内容

 "dev": "webpack serve -c build/webpack.dev.ts"

执行pnpm run dev，就能看到项目已经跑起来了，访问http://localhost:3000，就可以看到项目界面

webpack打包环境配置

修改webpack.prod.js的内容：

const {merge} = require("webpack-merge")
const baseConfig = require("./webpack.base.js")

module.exports = merge(baseConfig,{
    mode:"production",//生产模式下，会开启tree-shaking和压缩代码，以及其他优化
})

在package.json中添加build打包指令:

"build":"webpack serve -c build/webpack.dev.ts"

Webpack构建速度优化

构建耗时分析

当进行优化的时候,肯定要先知道时间都花费在哪些步骤上了,而speed-measure-webpack-plugin插件可以帮我们做到,安装依赖：

pnpm i speed-measure-webpack-plugin -D

使用的时候为了不影响到正常的开发/打包模式,我们选择新建一个配置文件,新增webpack构建分析配置文件build/webpack.analy.js

const prodConfig = require('./webpack.prod.js') // 引入打包配置
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); // 引入webpack打包速度分析插件
const smp = new SpeedMeasurePlugin(); // 实例化分析插件
const { merge } = require('webpack-merge') // 引入合并webpack配置方法

// 使用smp.wrap方法,把生产环境配置传进去,由于后面可能会加分析配置,所以先留出合并空位
module.exports = smp.wrap(merge(prodConfig, {

}))

修改package.json添加启动webpack打包分析脚本命令,在scripts新增：

{
  // ...
  "scripts": {
    // ...
    "build:analy": "cross-env NODE_ENV=production BASE_ENV=production webpack -c build/webpack.analy.js"
  }
  // ...
}

可以在图中看到各个部分占的耗时，现在因为项目内容比较少,所以耗时都比较少,在真正的项目中可以通过这个来分析打包时间花费在什么地方,然后来针对性的优化。

开启多线程loader

webpack的loader默认在单线程执行,现代电脑一般都有多核cpu,可以借助多核cpu开启多线程loader解析,可以极大地提升loader解析的速度,thread-loader就是用来开启多进程解析loader的,安装依赖：

pnpm i thread-loader -D

启用多线程打包，修改webpack.base.js：

// webpack.base.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.(ts|tsx)$/,
        use: ['thread-loader', 'babel-loader']
      }
    ]
  }
}

总结：

到目前为止，一些常见的优化构建速度和优化构建结果，完整代码将上传至gitee。当然这还远远不够，还有很多细节没有做到位，比如oneOf、eslint部分、babel的辅助代码、图片压缩、Commitlint和Commitizen，引入Less、Sass（Scss）和Stylus等等…，

gitee地址：Webpackscaffolding: 基于webpack5和react18和ts构建的项目

通过学习Webpack配置，我掌握了创建基本项目结构并成功引入React和TypeScript的方法，以及webpack配置对于项目的优化，项目的构建速度，都对我有了很大的提升，使我更加熟练地应用Webpack进行项目构建和优化，同时能够确保项目代码的一致性和高质量，为团队协作和项目持续健康发展提供了重要支持。