前端从零搭建自己的脚手架

李优秀 · 2024-6-23 07:28:12

目录
一、什么是脚手架
二、项目的创建
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先添加一个节点：

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

复制代码

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 />)
}

复制代码

在App.css写一个简朴的样式：

h2 {
color:red;
}

复制代码

以及App.tsx

import React from 'react'
import './App.css'
function App() {
return <h2>你好，蒙面大婶</h2>
}
export default App

复制代码

5、引入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 -- init    6、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 - D    loader：在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 <= 8"] },
useBuiltIns: "usage", // 根据配置的浏览器兼容,以及代码中使用到的api进行引入polyfill按需添加
corejs: 3, // 配置使用core-js使用的版本
loose: true,
},
],
// 如果您使用的是 Babel 和 React 17，您可能需要将 "runtime": "automatic" 添加到配置中。
// 否则可能会出现错误：Uncaught ReferenceError: React is not defined
["@babel/preset-react", { runtime: "automatic" }],
"@babel/preset-typescript",
],
};

复制代码

我们必要通过 webpack-dev-server 来启动项目，所以必要安装相干的依赖： pnpm i webpack-dev-server webpack-merge -D 并设置webpack.dev.ts ：

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 host = "127.0.0.1";
const port = "8082";
// 合并公共配置,并添加开发环境配置
const devConfig: Configuration = merge(baseConfig, {
mode: "development", // 开发模式,打包更加快速,省了代码优化步骤
devtool: "eval-cheap-module-source-map",
devServer: {
host,
port,
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;

复制代码

在tsconfig.json中加入一行"jsx":"react-jsx",这样就不必要在tsx文件中手动引入react：

{
"compilerOptions": {
"jsx": "react-jsx"
},
"include": ["./src"]
}

复制代码

在 package.json 中添加启动脚本：

"scripts": {
"dev": "webpack serve -c build/webpack.dev.ts"
},

复制代码

最后在终端运行pnpm dev启动项目，出现以下结果说明运行成功。

设置webpack.prod.ts：

import { Configuration } from "webpack";
import { merge } from "webpack-merge";
import baseConfig from "./webpack.base";
const prodConfig: Configuration = merge(baseConfig, {
mode: "production", // 生产模式,会开启tree-shaking和压缩代码,以及其他优化
});
export default prodConfig;

复制代码

在 package.json 中添加脚本下令来执行构建任务：

"scripts": {
"build": "webpack -c build/webpack.prod.ts"
},

复制代码

然后运行pnpm build下令，就是使用名为"webpack.prod.ts"的设置文件来进行生产情况下的构建。Webpack会根据该设置文件对项目进行打包和优化，生成用于生产情况摆设的文件。
运行后会在根目录生成一个dist文件夹，就是打包、压缩或编译后的文件，如（HTML、CSS、JavaScript文件），用于摆设到生产情况。

copy静态资源：
一般 public 文件夹会放一些静态资源（如图片、 css 、 js 文件）,可以直接根据绝对路径引入，必要安装依赖： pnpm i copy - webpack - plugin - D 修改webpack.base.ts ：

const baseConfig: Configuration = {
// ...
plugins: [
new HtmlWebpackPlugin({
title: "webpack5-react-ts",
filename: "index.html",
// 复制 'index.html' 文件，并自动引入打包输出的所有资源（js/css）
template: path.join(__dirname, "../public/index.html"),
inject: true, // 自动注入静态资源
hash: true,
cache: false,
// 压缩html资源
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true, //去空格
removeComments: true, // 去注释
minifyJS: true, // 在脚本元素和事件属性中缩小JavaScript(使用UglifyJS)
minifyCSS: true, // 缩小CSS样式元素和样式属性
},
}),
],
};

复制代码

打包设置文件 webpack.prod.ts 中新增 copy 插件设置：

import { Configuration } from "webpack";
import { merge } from "webpack-merge";
import baseConfig from "./webpack.base";
import path from "path";
import CopyPlugin from "copy-webpack-plugin";
const prodConfig: Configuration = merge(baseConfig, {
mode: "production", // 生产模式,会开启tree-shaking和压缩代码,以及其他优化
plugins: [
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, "../public"), // 复制public下文件
to: path.resolve(__dirname, "../dist"), // 复制到dist目录中
filter: (source) => !source.includes("index.html"), // 忽略index.html
},
],
}),
],
});
export default prodConfig;

复制代码

在 public 中新增一个名为 favicon.ico 图标文件，在 index.html 中引入：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>webpack5-react-ts</title></head><body>
<div id="root"></div>
</body></html>

复制代码

在终端执行 pnpm build下令，就可以看到 public 下的 favicon.ico 图标文件被复制到 dist 文件中，再运行pnpm dev下令就好了。

7、文件别名

设置 webpack.base.ts ：

resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx", ".less", ".css"],
// 别名需要配置两个地方，这里和 tsconfig.json
alias: {
"@": path.join(__dirname, "../src")
},
},

复制代码

设置tsconfig.json：

{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
},
}

复制代码

8、引入less、sass、stylus

在Webpack中，Less、Sass和Stylus是CSS预处理器，它们允许开发职员使用类似编程语言的语法来编写样式表，并将其转换为浏览器可辨认的标准CSS。
在终端输入以下下令安装依赖：
pnpm i less less - loader sass - loader sass stylus stylus - loader - D 在 webpack.base.ts 添加相干的 loader ：

const cssRegex = /\.css$/;
const sassRegex = /\.(scss|sass)$/;
const lessRegex = /\.less$/;
const stylRegex = /\.styl$/;
const styleLoadersArray = [
"style-loader",
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[path][name]__[local]--[hash:5]",
},
},
},
];
const baseConfig: Configuration = {
// ...
module: {
rules: [
// ...
{
test: lessRegex,
use: [
...styleLoadersArray,
{
loader: 'less-loader',
options: {
lessOptions: {
// 如果要在less中写js的语法，需要加这一配置
javascriptEnabled: true
}
}
}
]
},
{
test: sassRegex,
use: [
...styleLoadersArray,
{
loader: 'sass-loader',
options: {
implementation: require('sass') // 使用dart-sass代替node-sass
}
}
]
},
{
test: stylRegex,
use: [
...styleLoadersArray,
'stylus-loader'
]
}
]
}
}

复制代码

三、webpack构建速度优化

  1、webpack进度条

          webpack进度条以图形方式显示项目运行情况，使我们可以清晰地了解项目的运行程度。
  首先安装依赖：
      pnpm i webpackbar    -D       webpack.base.ts 中引入：

// ...
import WebpackBar from 'webpackbar';
// ...
const baseConfig: Configuration = {
// ...
// plugins 的配置
plugins: [
// ...
new WebpackBar({
color: "#85d", // 默认green，进度条颜色支持HEX
basic: false, // 默认true，启用一个简单的日志报告器
profile:false, // 默认false，启用探查器。
})
],
};
export default baseConfig;

复制代码

在运行后，终端的输出为：

2、构建耗时

可以清楚的看到每个步调的花费时长，安装依赖：
pnpm i speed-measure-webpack-plugin -D 在build中新建webpack.analy.ts：

import { Configuration } from "webpack";
import prodConfig from "./webpack.prod"; // 引入打包配置
import { merge } from "webpack-merge"; // 引入合并webpack配置方法
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); // 引入webpack打包速度分析插件;
const smp = new SpeedMeasurePlugin(); // 实例化分析插件
// 使用smp.wrap方法,把生产环境配置传进去,由于后面可能会加分析配置,所以先留出合并空位
const analyConfig: Configuration = smp.wrap(merge(prodConfig, {}));
export default analyConfig;

复制代码

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

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

复制代码

在终端执行 pnpm build:analy。
3、开启持久化存储缓存：

通过对文件做哈希对比来验证文件前后是否一致，如果一致则接纳上一次的缓存，可以极大地节省时间。修改webpack.base.ts:

module.exports = {
// ...
cache: {
type: 'filesystem', // 使用文件缓存
},
}

复制代码

4、开启多线程loader

          多线程loader是一种可以并行加载多个资源或数据的系统或程序组件。它使用多线程技能，允许同时从差别来源加载数据，以进步团体加载速度和性能。
  安装依赖：
   pnpm i thread-loader -D    修改 webpack.base.ts ：

module: {
rules: [
{
test: /\.(ts|tsx)$/, // 匹配ts和tsx文件
use: [
{
loader: 'thread-loader',
options: {
wokers: 4 // 进程数
}
},
'babel-loader']
}，
]
}

复制代码

四、webpack构建产物优化

  1、bundle体积分析工具

          bundle体积分析工具是一个用于可视化显示 bundle 结构和巨细的工具。它可以帮我们检察 JavaScript 和其他资源文件在 bundle 中的巨细、依赖关系等信息。
  安装依赖：
      pnpm i webpack-bundle-analyzer    -D       修改 webpack.analy.ts ：

import { Configuration } from "webpack";
import { merge } from "webpack-merge";
import prodConfig from "./webpack.prod";
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
// 引入webpack打包速度分析插件
const smp = new SpeedMeasurePlugin();
// 使用smp.wrap方法,把生产环境配置传进去,由于后面可能会加分析配置,所以先留出合并空位
const analyConfig: Configuration = smp.wrap(merge(prodConfig, {
plugins: [
new BundleAnalyzerPlugin() // 配置分析打包结果插件
]
}))
export default analyConfig;

复制代码

2、样式提取

安装依赖：
pnpm i mini-css-extract-plugin -D 修改 webpack.base.ts：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const isDev = process.env.NODE_ENV === 'development' // 是否是开发模式
const styleLoadersArray = [
isDev ? "style-loader" : MiniCssExtractPlugin.loader, // 开发环境使用stylelooader,打包模式抽离css
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[path][name]__[local]--[hash:5]",
},
},
},
'postcss-loader'
];

复制代码

修改 webpack.prod.ts：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const prodConfig: Configuration = merge(baseConfig, {
// ...
plugins: [
// ...
new MiniCssExtractPlugin({
filename: 'static/css/[name].css' // 抽离css的输出目录和名称
}),
],
});
export default prodConfig;

复制代码

完成以上步调后，Webpack会把样式从JavaScript bundle中提取出来，并生成单独的CSS文件。

3、tree-shaking清理未引用的js

tree-shaking 的字面意思是树摇，伴随着摇树这个动作，树上的枯枝败叶都会被摇下来。是指通过静态代码分析来辨认和删除 JavaScript 中未被使用的未引用代码（通常是未被导入或调用的代码）。这种优化技能有助于减小最终打包后的文件巨细，由于它可以或许消除那些未被使用的模块、变量、函数或方法。
在 src/components 目录下新增 Demo1.tsx 、 Demo2.tsx 两个组件： Demo1.tsx：

import React from "react";
function Demo1() {
return <h3>我是Demo1组件</h3>
}
export default Demo1

复制代码

Demo2.tsx：

import React from "react";
function Demo2() {
return <h3>我是Demo2组件</h3>
}
export default Demo2

复制代码

在 src/components 目录下新增 index.ts ：

export { default as Demo1 } from './Demo1'
export { default as Demo2 } from './Demo2'

复制代码

在 App.tsx 中引入两个组件，但只使用 Demo1 组件：

import { Demo1, Demo2 } from '@/components'
function App() {
return <>
<Demo1 />
</>
}
export default App

复制代码

执行程序，在 main.js 中只搜索到了 Demo1 ，Demo2 就被 tree-shaking 删除掉了。
4、tree-shaking清理未引用的css

和清除JS类似，这个树摇会清除掉不必要的css样式，安装依赖：
pnpm i purgecss-webpack-plugin glob-all -D 修改 webpack.prod.ts ：

import MiniCssExtractPlugin from 'mini-css-extract-plugin'
const globAll = require('glob-all')
const { PurgeCSSPlugin } = require('purgecss-webpack-plugin')
const prodConfig: Configuration = merge(baseConfig, {
// ...
plugins: [
// 抽离css插件
new MiniCssExtractPlugin({
filename: 'static/css/[name].[contenthash:8].css'
}),
new PurgeCSSPlugin({
paths: globAll.sync(
[`${path.join(__dirname, '../src')}/**/*`, path.join(__dirname,
'../public/index.html')],
{
nodir: true
}
),
// 用 only 来指定 purgecss-webpack-plugin 的入口
only: ["dist"],
safelist: {
standard: [/^ant-/] // 过滤以ant-开头的类名，哪怕没用到也不删除
}
}),
]
})

复制代码

5、资源懒加载

资源懒加载指的是将某些模块或资源耽误加载到应用程序。资源懒加载的作用主要在于进步应用程序的性能、减少加载时间，并允许按需加载模块和其他资源，从而提拔用户体验。
新建 src/components/LazyDemo.tsx ：

import React from "react";
function LazyDemo() {
return <h3>我是懒加载组件组件</h3>
}
export default LazyDemo

复制代码

修改 App.tsx ：

import React, { lazy, Suspense, useState } from 'react'
const LazyDemo = lazy(() => import('@/components/LazyDemo')) // 使用import语法配合react的Lazy动态引入资源
function App() {
const [show, setShow] = useState(false)
// 点击事件中动态引入css, 设置show为true
const handleOnClick = () => {
import('@/App.css')
setShow(true)
}
return (
<>
<h2 onClick={handleOnClick}>展示</h2>
{/* show为true时加载LazyDemo组件 */}
{show && <Suspense fallback={null}><LazyDemo /></Suspense>}
</>
)
}
export default App

复制代码

点击展示时，才会加载 app.css 和 LazyDemo 的资源。

  6、资源预加载

        预加载可以确保关键资源在用户必要时已经存在，从而加快页面响应速度，对于一些异步加载的内容，可以在页面加载完成之前预先获取，以便在必要时立刻使用。
   在 src/components 目录下新建 PreloadDemo.tsx 、 PreFetchDemo.tsx ：

// src/components/PreFetchDemo.tsx
import React from "react";
function PreFetchDemo() {
return <h3>我是PreFetchDemo组件</h3>
}
export default PreFetchDemo

复制代码

在 import 引入动态资源时使用 webpack 的魔法注释，修改 App.tsx ：

import React, { lazy, Suspense, useState } from 'react'
// prefetch
const PreFetchDemo = lazy(() => import(
/* webpackChunkName: "PreFetchDemo" */
/*webpackPrefetch: true*/
'@/components/PreFetchDemo'
))
function App() {
const [show, setShow] = useState(false)
const onClick = () => {
setShow(true)
}
return (
<>
<h2 onClick={onClick}>展示</h2>
{/* show为true时加载组件 */}
{show && (
<>
<Suspense fallback={null}><PreloadDemo /></Suspense>
<Suspense fallback={null}><PreFetchDemo /></Suspense>
</>
)}
</>
)
}
export default App

复制代码

运行后点击展示

7、gzip压缩

webpack构建过程中可以主动对文件进行gzip压缩，从而减小文件巨细，进步页面加载速度。
安装依赖：
pnpm i compression-webpack-plugin -D 修改 webpack.prod.ts ：

const glob = require('glob')
const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
// ...
plugins: [
// ...
new CompressionPlugin({
test: /.(js|css)$/, // 只生成css,js压缩文件
filename: '[path][base].gz', // 文件命名
algorithm: 'gzip', // 压缩格式,默认是gzip
threshold: 10240, // 只有大小大于该值的资源会被处理。默认值是 10k
minRatio: 0.8 // 压缩率,默认值是 0.8
})
]
}

复制代码

运行程序后，在JS的目录下回生成一个.gz结尾的文件。

总结：

最后，一个根本的脚手架就搭建完成了。当然本文也有许多不美满的地方，后续我会不停美满优化该项目，盼望可以通过本文让您对webpack工具有一个更加深入和全面的认识，以便于应对以后项目中设置更改。如果您发现本文中有错误的地方，接待评论以便及时更正！！！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

前端从零搭建自己的脚手架

0 个回复

快速回复

楼主热帖

标签云