react+typescript+wbpack5项目搭建

已于 2023-04-19 11:06:03 修改
阅读量247 收藏 1
点赞数 1
文章标签： react.js typescript webpack
于 2023-04-18 16:01:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NUAN__YANG/article/details/130111011
版权

步骤一：初始化webpack

npm init -y

创建目录 public，scropts，src
在这里插入图片描述

步骤二：创建文件 .gitignore 配置忽略提交文件

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

步骤三：

创建文件 webpack.common.js：用于编写公共配置
创建文件 webpack.dev.js：用于编写测试环境配置
创建文件 webpack.prod.js：用于编写生产打包环境配置

虽然都分开了配置，但是在公共配置中，还是可能会出现某个配置的某个选项在开发环境和生产环境中采用不同的配置，这个时候有两种选择：

  • 分别在 dev 和 prod 配置文件中写一遍，common 中就不写了
  • 设置某个环境变量，根据这个环境变量来判别不同环境

为了代码优雅性选择第二种方案，下载所需第三方包cross-env ：统一配置Node环境变量

npm i cross-env

步骤四：配置webpack

1，安装webpack相关包
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm i webpack-merge@5.7.3
npm install  --save-dev html-webpack-plugin
2，添加html模板文件和webpack入口文件index.js
<!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>

// src/index.js
const ele = document.querySelector('#root')
ele.innerHTML = '测试'
3，添加启动项目配置
// package.json
"scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --config ./scripts/config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config ./scripts/config/webpack.prod.js"
},
4，配置公共配置，然后分别引入开发、生产环境配置文件。
// webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { PROJECT_PATH } = require('../constant')

module.exports = {
  entry: {
    app: path.resolve(PROJECT_PATH, './src/app.js')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(PROJECT_PATH, './index.html'),
    }),
  ]
}
5，配置开发环境，引入公共配置并且添加 webpack-dev-server的配置
const { merge } = require('webpack-merge')
const path = require('path')
const webpack = require('webpack')

const common = require('./webpack.common')
const { PROJECT_PATH, SERVER_HOST, SERVER_PORT } = require('../constant')

module.exports = merge(common, {
  mode: 'development',
  devtool: 'cheap-module-source-map',
  output: {
    filename: 'js/[name].js',
    path: path.resolve(PROJECT_PATH, './dist')
  },
  devServer: {
    host: SERVER_HOST, // 服务ip
    port: SERVER_PORT, // 服务端口
    // stats: 'errors-only', // 设为errors-only表示终端只打印错误类型的日志，不会打印warning以及其他信息影响阅读
    // clientLogLevel: 'none', // 设为none表示去除多余网页console信息
    compress: true, // 设为true表示启用gzip压缩，加快网站打开速度
    open: true, // 设为true表示第一次启动项目时自动打开默认浏览器
    hot: true, // 设为true表示启用服务热替换配置
    // noInfo: true, // 设为true表示去除启动项目时显示的打包信息
    https: true, // 启动项目的时候，默认是https协议
  },
  plugins: [
    // 实际上只开启 hot：true 就会自动识别有无声明该插件，没有则自动引入，但是怕有隐藏问题这里还是手动加上了
    new webpack.HotModuleReplacementPlugin()
  ]
})

小工具
webpackbar：用于显示打包进度条，会更有体验感

npm install webpackbar -D

// webpack.common.js
const WebpackBar = require('webpackbar')
module.exports = {
  plugins: [
    new WebpackBar({
      name: 'Link Startou!!!',
      color: '#52c41a'
    }),
  ]
}
6，配置生产环境

同样引入公共配置，生产环境一般输出文件都会加上哈希值，而开发环境不需要，开发环境使用 webpack-dev-server 启动时不会在项目中真正的产生文件，而是存在了内存中，主要是为了打包。

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

const common = require('./webpack.common')
const { PROJECT_PATH } = require('../constant')

module.exports = merge(common, {
  mode: 'production',
  devtool: false,
  output: {
    filename: 'js/[name].[contenthash:8].js',
    path: path.resolve(PROJECT_PATH, './dist')
  },
})

步骤五：CSS相关配置

1，配置css
npm install --save-dev style-loader
npm install --save-dev css-loader
npm install --save-dev postcss-loader postcss
npm install postcss-preset-env --save-dev

style-loader：将 js 文件中引入的 css 代码插入到 html 模板文件，使网页可以正常展示样式
css-loader：令 js 可以通过 import 或者 require 等命令导入 css 代码
postcss-loader postcss：与 sass/less 不同，不是预处理器，相当于一个工具箱，可以使用它配合插件去转换css
postcss-preset-env：将最新的 css 语法转换为目标环境的浏览器能够理解的语法，不用考虑浏览器兼容问题，以前需要配合 autoprefixer 第三方包自动补全前缀，现在新版本已经内置autoprefixer功能了

2，配置预处理器
npm install less less-loader --save-dev
npm install node-sass --save-dev
npm install sass-loader sass webpack --save-dev

less：为 less-loader 提供依赖
less-loader：将 less 代码转换为 css 代码
node-sass：为 sass-loader 提供依赖
sass-loader：将 sass 代码转换为 css 代码

配置less

// webpack.common.js module.rules
{
  test: /\.less$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]-[local]-[hash:base64:8]',
        },
      },
    },
    {
      loader: 'postcss-loader',
    },
    {
      loader: 'less-loader',
    },
  ],
},

配置sass

// webpack.common.js module.rules
{
  test: /\.scss$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]-[local]-[hash:base64:8]',
        },
      },
    },
    {
      loader: 'postcss-loader',
    },
    {
      loader: 'sass-loader',
    },
  ],
},

步骤六：Babel相关配置

兼容 ES6+

npm install -D babel-loader @babel/core @babel/preset-env
npm install @babel/runtime-corejs3
npm install --save-dev @babel/plugin-transform-runtime

babel-loader：用于处理 ES6+ 语法，将其编译为浏览器可以执行的 js
@babel/core：babel 所需依赖
@babel/preset-env：是一组ES6转译的plugins，会根据设置的目标浏览器环境（browserslist），选择该环境不支持的新特性进行转译，这样就减少了不必要转译，增快打包速度。
@babel/plugin-transform-runtime：提供 ES6+ 的 api，如 es6 新的数组方法等，和 @babel/polyfill 不同的是该包可以实现按需加载，不会全部引入影响打包速度，需要依赖 runtime-corejs。
@babel/runtime-corejs3：相当于 @babel/polyfill 的功能，在 7.4.0 版本后的 babel 使用 runtime-core 代替了 babel/polyfill。

1，Babel 在执行编译的过程中，会从项目的根目录下的 .babelrc 文件中读取配置（本质上是json格式文件），因此此时需要在项目根目录新建该文件

//  .babelrc 
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": {
          "version": 3,
          "proposals": true
        }
      }
    ]
  ]
}

2，给 webpack 配上对 js 文件应用，一并配置tsx和jsx

// webpack.common.js module.rules
{
  test: /\.[jt]sx?$/,
   exclude: /node_modules/, // 排除 node_modules 文件夹
   use: {
     loader: 'babel-loader', // babel-loader  babel-loader处理JSX语法的。
     options: {
       babelrc: true,
       cacheDirectory: true,
     },
   },
 },

步骤七：支持React

npm i react react-dom @types/react @types/react-dom @babel/preset-react

react：react核心依赖
react-dom：负责处理web端的dom的渲染
@types/react ：react 类型声明文件，用于 tsx
@types/react-dom：react-dom 类型声明文件，用于 tsx
@babel/preset-react ：用于让 babel 可以转译 jsx 语法

配置.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": {
          "version": 3,
          "proposals": true
        }
      }
    ]
  ]
}

步骤八：支持ts

npm install --save typescript @babel/preset-typescript

typescript：支持 ts
@babel/preset-typescript：处理ts文件，原理是去掉ts的类型声明，然后再用其他 babel 插件进行编译

1，修改 .babelrc

"presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],

2，配置 tsconfig.json

{
  "compilerOptions": {
    "target": "ES5", /* 指定 ECMAScript 目标版本：'ES3'、'ES5'（默认）、'ES2015'、'ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020' 或 'ESNEXT'。 */
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ], /* 指定要包含在编译中的库文件。 */
    // "allowJs": true, /* 允许编译 javascript 文件。打开会导致check到nvm中的一些js文件 */
    "skipLibCheck": true, /* 跳过声明文件的类型检查。 */
    "esModuleInterop": true, /* 通过为所有导入创建命名空间对象，在 CommonJS 和 ES 模块之间启用发射互操作性。 暗示“allowSyntheticDefaultImports”。 */
    "allowSyntheticDefaultImports": true, /* 允许从没有默认导出的模块中默认导入。 这不会影响代码发出，只是类型检查。 */
    "strict": true, /* 启用所有严格的类型检查选项。 在开发中，建议将stricet这类选项都开启。 */
    "forceConsistentCasingInFileNames": true, /* 禁止对同一文件的大小写不一致的引用。 */
    "noFallthroughCasesInSwitch": true, /* 在 switch 语句中报告失败情况的错误。 */
    "module": "esnext", /* 指定模块代码生成：“none”、“commonjs”、“amd”、“system”、“umd”、“es2015”、“es2020”或“ESNext”。 */
    "moduleResolution": "node", /* 指定模块解析策略：'node' (Node.js) 或 'classic' (TypeScript pre-1.6)。 */
    "resolveJsonModule": true, //允许导入扩展名为“.json”的模块
    "isolatedModules": true, //将每个文件作为单独的模块（与“ts.transpileModule”类似）。
    // "noEmit": true, /* 不发出输出（不生成编译后的文件）。 */
    "jsx": "react", /* 指定 JSX 代码生成：'preserve'、'react-native' 或 'react'。 */
  },
  "include": [
    "src/**/*"
  ], //包含的文件
}

由于使用了 ts，在导入文件的时候可能会出现类型错误，如 css module 的 import style from ‘./index.scss’ 报错 找不到模块“./index.scss”或其相应的类型声明，因此需要手动编写声明类型文件，在 src 目录下新建 file.d.ts 文件

// src/file.d.ts
declare module "*.css" {
  const style: any;
  export default style
}

declare module "*.scss" {
  const style: any;
  export default style
}

declare module "*.less" {
  const style: any;
  export default style
}

步骤九：优化

1，webpack 可以省略后缀名查找并处理文件

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.tsx', '.ts', '.json'],
  },
}

2，terser-webpack-plugin：用去去除生产环境的无用js代码，webpack5 之后自带，不需要另行安装，直接引入使用

// webpack.prod.js
const TerserPlugin = require("terser-webpack-plugin")

module.exports = merge(common, {
  optimization: {
    minimize: true,
    minimizer:[
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          compress: { pure_funcs: ['console.log'] },
        }
      }),
    ]
  }
})

extractComments：设为 false 表示去除所有注释，除了有特殊标志的注释如 @preserve 标记
pure_funcs：去除函数，如上述配置的意思是将所有 console.log 函数去除

3，fork-ts-checker-webpack-plugin：ts 类型检查，让终端可以显示类型错误

npm install --save-dev fork-ts-checker-webpack-plugin

// webpack.common.js
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
module.exports = {
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      typescript: {
        configFile: path.resolve(PROJECT_PATH, './tsconfig.json'),
      },
    }),
  ],
}

步骤十：配置资源

之前处理图片字体之类的资源的时候等，需要用到url-loader，file-loader
现在webpack5 已内置资源模块，因此无需再下载直接配置即可，更多详情参考 【webpack5 新特性asset】

asset/resource：file-loader的功能。
asset/inline：url-loader的功能。
asset：使用这个配置，默认小于 8kb 的文件将被视为inline模块类型，将转为 Data URI 以内联的方式使用；大于 8kb 的文件将被视为resource 模块类型，打包成单独的文件，之前有url-loader设置asset size limit 限制实现

{
  test: /\.(png|jpg|jpeg|mp4|gif|mov)$/i,
  type: "asset",
  parser: {
    dataUrlCondition: {
      maxSize: 10 * 1024, // 小于10kb的会被base64处理
    },
  },
},
{
  test: /\.(dae|eot|woff|woff2|svg|ttf|otf)$/,
  type: 'asset/resource'
},

规定打包目录，配置一下生产环境的打包出口

// scripts/config/webpack.prod.js
module.exports = merge(common, {
  output: {
    // ...other
    assetModuleFilename: 'images/[name].[contenthash:8].[ext]',
  },
})

因为使用的是 ts，导入上述文件后缀名会产生不存在的错误，因此继续添加声明文件

// src/file.d.ts
declare module '*.png' {
  const path: string
  export default path
}
declare module '*.jpg' {
  const path: string
  export default path
}
declare module '*.jpeg' {
  const path: string
  export default path
}
declare module '*.gif' {
  const path: string
  export default path
}
declare module '*.mov' {
  const path: string
  export default path
}
declare module '*.svg' {
  const path: string
  export default path
}

//.......

处理非动态导入静态资源

copy-webpack-plugin：处理不需要动态导入的静态资源文件，将其复制进打包目录

npm install copy-webpack-plugin --save-dev

const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  plugins: [
	new CopyWebpackPlugin({
	  patterns: [
	    {
	      from: path.join(__dirname, '../../src/resource'),
	      to: path.join(__dirname, '../../dist/resource'),
	    },
	  ],
	}),
  ]
}

测试

将src下的index.js修改为index.tsx并且修改webpack.common.js入口文件
注意：react18之后废弃了ReactDOM.render，改用createRoot

import React from 'react'
import ReactDOM from 'react-dom/client'
import styles from './app.scss'

const container = document.getElementById('root') as HTMLElement
const root = ReactDOM.createRoot(container)
root.render(<div className={styles.title}>阶段测试</div>)
酒肆_侯旭辉
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Egg+React+TypeScript+AntMoble记账本项目
06-30
在本项目中，“Egg+React+TypeScript+AntMoble记账本项目”是一个结合了多种技术的前端与后端应用，旨在构建一个功能完善的记账本应用。以下是这个项目涉及的关键技术及其详细说明： 1. **Egg.js**： Egg.js 是一...
【git忽略提交指定文件】
weixin_43690623的博客
09-22 1453
在工作中，我们的package.json里的依赖版本可能和同事的不一致，为避免产生一些冲突，我们提交代码的时候，可以选择不提交package.json文件。
wbpack基础知识
qq_41743601的博客
09-23 490
wbpack解说 文章目录wbpack解说1.loader2.插件（plugin）3.模式(mode)4.浏览器兼容性5.使用不同的配置文件6.学习路线图7.webpack大致打包流程图8.webpack 打包学习8.1 webpack.config.js文件解说图片处理学习进度9.常用命令10.webpack的哪些坑11.devserver13.构建环境配置14.提取多个css文件为一个单独的文件15.css兼容性处理16.压缩css17.js语法检测eslint 1.loader webpack 只能
TypeScript基础语法介绍与创建 react
kkddqq1121的博客
04-11 167
create-react-app 项目名称 --template typescript。
【React】自定义搭建react脚手架（生产环境）
tuzi007a的博客
03-18 220
【React】自定义搭建react脚手架（生产环境）
terser-webpack-plugin如何去忽略react项目中的console（分为umi和非umi项目）
qq_37174991的博客
08-11 1660
1、对于antdesignpro生成的项目，因为是使用的umi（基于webpack再封装），所以忽略console的做法如下： 1）首先去查看当前项目的webpack的版本，如果当前webpack版本低于5.0，则我们需要去安装terser-webpack-plugin的版本也需要低于5；如果当前webpack版本大于5.0，则不需要安装，因为webpack自带最新 2）在项目目录的config/pulgin.config.js（引入是webpack的基本的一些配置）配置如下： 根据process参数配置
electron-boilerplate:react + typescript + electron 项目模板
05-25
react + typescript + electron 项目模板 Installation 1. yarn global add qingtian-cli 2. qt new your-project-name -t electron or git clone ...
react-antd-ts-admin:react + antd + typescript的后台管理系统
03-11
项目简介基于React+AntD+TypeScript的后台管理系统技术依赖React-（UI框架） 蚂蚁设计-（组件库） TypeScript-（静态类型） Webpack 轴距较少的功能登录/退出全屏浏览一键换肤个人中心侧边菜单标签快捷导航图标表单...
react-typescript-starter:react + scss + typescript + mobx最新版本
05-06
React+打字稿+ Mobx git clone https://github.com/Mainyf/react-typescript-starter cd react-typescript-starter npm i npm run start
React + Typescript + vite 后台管理系统
最新发布
08-06
React + Typescript + vite 后台管理系统
fork-ts-checker-webpack-plugin：在单独的进程上运行打字稿类型检查器的Webpack插件
02-05
Fork TS Checker Webpack插件 在单独的进程上运行TypeScript类型检查器的Webpack插件。 产品特点 加速类型检查和（通过将它们移至单独的进程） :racing_car: 支持现代TypeScript功能，例如和 :sparkles: 支持 :check_mark_button: 使用格式化程序显示漂亮的错误消息 :rainbow: 安装 此插件需要最低Node.js 10 ， Webpack 4 ， TypeScript 2.7和可选的ESLint 6 如果您依赖于Webpack 2 ， Webpack 3或TSLint 4 ，请使用插件的 。 如果您使用TypeScript> = 2.1和<2.7，或者无法更新到Node 10 ，请使用
git上传添加忽略文件如node_modules
m0_37650418的博客
07-22 1065
新建一个项目上传的时候，不小心把node_modules上传上去了，这个文件实在过于庞大，下面就介绍如何能忽略文件上传 进入项目所在目录 创建文件.gitignore 在”.gitignore” 文件里输入要忽略的文件夹及其文件 # dependencies /node_modules /.pnp .pnp.js # testing /coverage # production /build # misc .DS_Store .env.local .env.development.local .en
快来跟我一起学 React（Day4）
vv_bug
03-20 497
简介 上一节我们从 0 开始搭建了一个项目，完成了入口与出口的配置、ts 语法支持、react 基本库的安装、css 样式配置等工作，我们继续上一节的内容。 知识点 Eslint（代码质量校验） eslint-webpack-plugin（Eslint webpack 插件） eslint-config-react-app（React 官方 eslint 配置） fork-ts-checker-webpack-plugin（ts 语法校验插件） Optimization（分包优化等） 准备 上一节所有的
vue3 npm run serve报错： Error: Cannot find module ‘fork-ts-checker-webpack-plugin-v5‘
weixin_44378370的博客
12-15 8404
以此步骤尝试： 重新安装 npm install --save-dev fork-ts-checker-webpack-plugin 如果不行，升级一下 node https://nodejs.org/zh-cn/ 还是不行，终极解决方法，删除此项目，重新构建 构建命令 vue create vue3-1，注意Vue-cli的版本要在V4.5.4 以上版本，检查版本 vue --version ...
Cannot find module ‘fork-ts-checker-webpack-plugin-v5‘
qq407949480的博客
12-14 6079
用vue-clie脚手架搭建完vue3工程，执行npm run serve，会报一下错误。 Error: Cannot find module 'fork-ts-checker-webpack-plugin-v5' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25)...
webpack项目配置
qq_42349528的博客
03-09 1083
目录config.jswebpack.common.jswebpack.dev.jswebpack.prod.jswebpack.dll.js config.js const isDevelopment = process.env.NODE_ENV === "development" const isProduction = process.env.NODE_ENV === "production" const SERVER_HOST = "0.0.0.0" const SERVER_PORT = 800
React项目打包 优化详解
weixin_58207509的博客
11-21 2551
项目打包和优化-项目打包 目标：能够通过命令对项目进行打包 步骤： 在项目根目录打开终端，输入打包命令：npm run build 等待打包完成，打包后的内容被放在项目根下的 build 文件夹中 项目打包和优化-项目本地预览 目标：能够在本地预览打包后的项目 步骤： 全局安装本地服务包：npm i -g serve，该包提供了 serve 命令，用来启动本地服务 在项目根目录中执行命令：serve -s ./build，在 build 目录中开启服务器
vue或react项目生产环境去掉console.log
热门推荐
u010007013的博客
06-25 1万+
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。 如果手动删除未免也太累了，再说以后想再开发还得重新写console。 事实上webpack提供了删除console的插件，在vue-cli3里面是这样用的： 首先安装terser-webpack-plugin npm install terser-webpack-plugin -D 然后在vu...
React+TypeScript+webpack4：多入口配置实战与类型安全提升
总结，本文档是一份实践性的教程，旨在帮助读者理解如何在React+TypeScript+webpack4的项目中有效地实现多入口配置，提高开发效率和代码质量。通过阅读和实践，开发者可以更好地组织和管理大型React项目，并充分利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值