前端从零搭建自己的脚手架
目录
一、什么是脚手架
二、项目的创建
1、包管理工具
2、初始化
3、构建项目的基本结构
4、引入react
5、引入typescript
6、webpack配置
7、文件别名
8、引入less、sass、stylus
三、webpack构建速度优化
1、webpack进度条
2、构建耗时
3、开启持久化存储缓存：
4、开启多线程loader
四、webpack构建产物优化
1、bundle体积分析工具
2、样式提取
3、tree-shaking清理未引用的js
4、tree-shaking清理未引用的css
5、资源懒加载
6、资源预加载
7、gzip压缩
总结：
一、什么是脚手架
Webpack脚手架是一个工具，用于快速搭建基于Webpack的项目结构。它通常包括了一些预设的配置和插件，以便用户可以快速开始一个新的项目，而不必从头开始配置Webpack。这些脚手架可以帮助开发人员自动处理诸如打包、代码转译、资源管理等繁琐的任务，从而让他们更专注于项目的逻辑实现。
二、项目的创建
1、包管理工具
-
npm（Node Package Manager）是 Node.js 的默认包管理器，可以用于安装、更新和删除 JavaScript 包。
-
yarn 是另一个流行的包管理器，由 Facebook 开发。它旨在解决 npm 的一些限制和一些性能安全问题，并且通常比 npm 更快速、稳定。
-
pnpm 是另一个包管理器，它通过重用文件系统硬链接以及共享依赖来显著减少磁盘空间占用。相比于传统的 npm 和 yarn，pnpm 在安装包时只保存一个拷贝，因此在大型项目中能够节省大量的磁盘空间。
此次项目中我们使用pnpm。
相关资料：pnpm基本使用
2、初始化
新建一个文件夹，然后在根目录打开终端并输入以下命令：
pnpm - v # 初始化 package . json 文件 pnpm init初始化后会在根目录生成一个package.json 文件：
package.json文件在Webpack中扮演了重要的角色。它用于描述项目的依赖项信息和定义的依赖项，并且可以利用package.json中的脚本命令来执行构建任务。
3、构建项目的基本结构
├── build | ├── webpack.base.ts # 公共配置 | ├── webpack.dev.ts # 开发环境配置 | └── webpack.prod.ts # 打包环境配置 ├── public │ └── index.html # html模板 ├── src | ├── App.tsx | ├── App.css │ └── index.tsx # react应用入口页面 └── package.json
index.html先添加一个节点：
4、引入react
我们先简单了解一下什么是react：
React 是一个用于构建用户界面的 JS 库。它通过组件化的方式让开发者可以轻松地构建交互式的用户界面。React 使用虚拟 DOM 技术，这使得页面在更新时能够更加高效地进行渲染。通过使用 JSX 语法，React 允许开发者将 HTML 结构和 JavaScript 代码结合起来。
安装react依赖：
pnpm i react react - dom # 声明依赖 pnpm i @ types / react @ types / react - dom - D在src/index.tsx中编写入口文件：
import React from 'react'; import { createRoot } from 'react-dom/client'; import App from './App'; const root = document.querySelector('#root') if(root) { createRoot(root).render() }在App.css写一个简单的样式：
h2 { color:red; }以及App.tsx
import React from 'react' import './App.css' function App() { return你好，蒙面大婶
} export default App5、引入typescript
简单了解一下什么是typescript（ts）：
TypeScript是一种由微软开发的开源编程语言。TypeScript通过添加静态类型、接口、类和其他高级结构来扩展JavaScript，从而使得在大型项目中更易于维护和阅读。它最终会被编译成纯粹的JavaScript，可以在任何支持JavaScript的地方运行。TypeScript的主要优势之一是提供了更强大的工具和功能，以帮助程序员在开发过程中尽早发现和修复错误。
在终端输入以下命令安装ts:
pnpm i typescript - D pnpm i babel - loader ts - node @ babel / core @ babel / preset - react @ babel / preset-typescript @ babel / preset - env core - js - D 初始化 tsconfig.json ： npx tsc -- init6、webpack配置
简单了解一下什么是webpack：
webpack 是一个流行的开源前端模块打包工具，它通过将各种静态资源（如JavaScript、CSS、HTML、图片等）视为模块以及其它的一 些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并基于这些模块生成优化后的静态文件（通常是一个或多bundle）。这些bundle可以被浏览器直接使用，从而提高网页的加载速度和运行效率。
在终端输入以下命令安装依赖：
pnpm i webpack webpack - cli - D pnpm i @ types / node - D因为需要引入css文件，所以还需要安装相关的loader：
pnpm i style - loader css - loader html - webpack - plugin - Dloader：在Webpack中，loader是用于转换非JavaScript文件（如CSS、图片、字体等）为模块的工具。
配置webpack.base.ts:
import { Configuration } from "webpack"; import HtmlWebpackPlugin from "html-webpack-plugin"; const path = require("path"); const baseConfig: Configuration = { entry: path.join(__dirname, "../src/index.tsx"), // 入口文件 // 打包出口文件 output: { filename: "static/js/[name].js", // 每个输出js的名称 path: path.join(__dirname, "../dist"), // 打包结果输出路径 clean: true, // webpack4需要配置clean-webpack-plugin来删除dist文件,webpack5内置了 publicPath: "/", // 打包后文件的公共前缀路径 }, // loader 配置 module: { rules: [ { test: /.(ts|tsx)$/, // 匹配.ts, tsx文件 use: "babel-loader" }, { test: /.css$/, //匹配 css 文件 use: ["style-loader", "css-loader"], }, ], }, resolve: { extensions: [".tsx", ".ts", ".jsx", ".js"], }, // plugins plugins: [ new HtmlWebpackPlugin({ // 复制 'index.html' 文件，并自动引入打包输出的所有资源（js/css） template: path.join(__dirname, "../public/index.html"), // 压缩html资源 minify: { collapseWhitespace: true, //去空格 removeComments: true, // 去注释 }, }), ], }; export default baseConfig;在根目录新建 babel.config.js ，并输入以下内容：module.exports = { // 执行顺序由右往左,所以先处理ts,再处理jsx,最后再试一下babel转换为低版本语法 presets: [ [ "@babel/preset-env", { targets: { browsers: ["> 1%", "last 2 versions", "not ie
