现代webpack/react/typescript/pnpm项目模板，从零到一搭建webpack项目-育师

项目模板

模板地址
如果急用，直接使用当前模板即可。点击右上角Use This Template即可创建一个新的项目。

背景

当我每每创建一个新的webpack项目时，总是需要经过繁琐的webpack配置来完成项目的init。如果从网络上搜寻快速的setup总会遇到各种各样的问题（由于包的版本有更新，有些配置已经废弃掉了）所有我决定搭建自己的webpack配置模板。

搭建步骤

1. pnpm 开启webpack项目

1.1 生成package.json

pnpminit

1.2 引入webpack

pnpmadd-D webpack webpack-cli webpack-dev-server

1.3 引入typescript

pnpmadd-D typescript ts-node @types/node

1.4 引入react

pnpmaddreact react-dom

pnpmadd-D @types/react @types/react-dom

2. 初始化react代码

2.1 创建src/app.tsx

constApp=()=>{return<div>Hello World</div>}exportdefaultApp

2.2 创建src/index.tsx

import{createRoot}from'react-dom/client'importAppfrom'./app'createRoot(document.getElementById('root')!).render(<App/>)

3. webpack配置

3.1 创建webpack.config.ts

importpathfrom'path'import{fileURLToPath}from'url'importtype{Configuration}from'webpack'constrootDir=path.dirname(fileURLToPath(import.meta.url))constconfig:Configuration={entry:'./src/index.tsx',output:{path:path.resolve(rootDir,'dist'),filename:'[name].[contenthash].js'},resolve:{extensions:['.ts','.tsx','.js','.jsx']},devtool:'source-map',module:{},mode:'development'}exportdefaultconfig

3.2 设置webpack插件

pnpmadd-D html-webpack-plugin clean-webpack-plugin

在public下创建index.html

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><title>Webpack React Template</title></head><body><divid="root"></div></body></html>

webpack 补充插件配置以及devServer配置

importpathfrom'path'import{fileURLToPath}from'url'importHtmlWebpackPluginfrom'html-webpack-plugin'import{CleanWebpackPlugin}from'clean-webpack-plugin'importtype{Configuration}from'webpack'import'webpack-dev-server'constrootDir=path.dirname(fileURLToPath(import.meta.url))constconfig:Configuration={entry:'./src/index.tsx',output:{path:path.resolve(rootDir,'dist'),filename:'[name].[contenthash].js'},resolve:{extensions:['.ts','.tsx','.js','.jsx']},plugins:[newHtmlWebpackPlugin({template:'./public/index.html'}),newCleanWebpackPlugin()],devtool:'source-map',devServer:{static:{directory:path.join(rootDir,'public')},compress:true,historyApiFallback:true},mode:'development'}exportdefaultconfig

3.3 设置webpack loader(style)

pnpmadd-D style-loader css-loader sass sass-loader

引入到webpack config的rules中：

constconfig:Configuration={entry:'./src/index.tsx',output:{path:path.resolve(rootDir,'dist'),filename:'[name].[contenthash].js'},resolve:{extensions:['.ts','.tsx','.js','.jsx']},plugins:[newHtmlWebpackPlugin({template:'./public/index.html'}),newCleanWebpackPlugin()],devtool:'source-map',module:{rules:[{test:/\.css$/i,use:['style-loader','css-loader']},{test:/\.scss$/i,use:['style-loader','css-loader','sass-loader']},{test:/\.(png|jpg|jpeg|gif|svg)$/i,type:'asset/resource'}]},devServer:{static:{directory:path.join(rootDir,'public')},compress:true,historyApiFallback:true},mode:'development'}exportdefaultconfig

这里还引入静态资源的rules直接从asset/resource中获取。
因为我们引入了sass，这里我们还需要定义sass文件（.sass,.scss)的模块类型,在src/types里创建index.d.ts:

declaremodule'*.scss'{constcontent:{[className:string]:string}exportdefaultcontent}

3.4 设置webpack babel

pnpmadd-D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader

在config进行如下配置

importpathfrom'path'import{fileURLToPath}from'url'importHtmlWebpackPluginfrom'html-webpack-plugin'import{CleanWebpackPlugin}from'clean-webpack-plugin'importtype{Configuration}from'webpack'import'webpack-dev-server'constrootDir=path.dirname(fileURLToPath(import.meta.url))constconfig:Configuration={entry:'./src/index.tsx',output:{path:path.resolve(rootDir,'dist'),filename:'[name].[contenthash].js'},resolve:{extensions:['.ts','.tsx','.js','.jsx']},plugins:[newHtmlWebpackPlugin({template:'./public/index.html'}),newCleanWebpackPlugin()],devtool:'source-map',module:{rules:[{test:/\.(ts|js)x?$/,exclude:/node_modules/,use:[{loader:'babel-loader',options:{presets:['@babel/preset-env',['@babel/preset-react',{runtime:'automatic'}],'@babel/preset-typescript']}}]},{test:/\.css$/i,use:['style-loader','css-loader']},{test:/\.scss$/i,use:['style-loader','css-loader','sass-loader']},{test:/\.(png|jpg|jpeg|gif|svg)$/i,type:'asset/resource'}]},devServer:{static:{directory:path.join(rootDir,'public')},compress:true,historyApiFallback:true},mode:'development'}exportdefaultconfig

4. typescript配置

根目录上创建tsconfg.json

{"compilerOptions":{"module":"esnext","target":"esnext","moduleResolution":"bundler","lib":["dom","dom.iterable","esnext"],"sourceMap":true,"declaration":true,"declarationMap":true,"noUncheckedIndexedAccess":true,"exactOptionalPropertyTypes":true,"strict":true,"jsx":"react-jsx","jsxImportSource":"react","verbatimModuleSyntax":true,"isolatedModules":true,"noUncheckedSideEffectImports":true,"moduleDetection":"force","skipLibCheck":true}}

通过上述配置，我们修改package.json的scripts

"scripts":{"start":"webpack serve --open --port 3210","build":"webpack"}

此时运行pnpm run start即可在3210端口访问项目。

接下来的内容是锦上添花：优化工程，即代码风格格式化，typescript eslint规则校验，使用git hooks触发生命周期钩子

5. 使用prettier格式化代码

pnpmadd-D prettier

在根目录创建.prettierrc

{"semi":false,"singleQuote":true,"trailingComma":"none","tabWidth":4,"useTabs":false,"printWidth":120,"bracketSpacing":true,"arrowParens":"avoid","endOfLine":"auto"}

在package.json配置格式化脚本

"scripts":{"start":"webpack serve --open --port 3210","build":"webpack","format":"prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\""},

执行即可把src中所有代码文件格式化

6. 配置eslint

pnpmadd-D eslint typescript-eslint eslint-plugin-react eslint-plugin-react-hooks eslint-webpack-plugin

根目录创建eslint.config.js

importtseslintfrom'typescript-eslint'importreactPluginfrom'eslint-plugin-react'importreactHooksfrom'eslint-plugin-react-hooks'exportdefault[...tseslint.configs.recommended,{files:['**/*.{ts,tsx}'],plugins:{react:reactPlugin,'react-hooks':reactHooks},rules:{...reactPlugin.configs.recommended.rules,...reactHooks.configs.recommended.rules},settings:{react:{version:'detect'}}}]

在packages的scripts脚本中写入

"scripts":{"start":"webpack serve --open --port 3210","build":"webpack","format":"prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"","lint":"eslint --ext .ts,.tsx","lint:fix":"eslint --ext .ts,.tsx --fix"},

7. husky 设置lint-staged

pnpmadd-D husky lint-staged

7.1 初始化git仓库

gitinit

7.2 初始化husky

npx方式

npx husky init

pnpm方式

pnpmexechusky init

7.3 配置husky的pre-commit钩子

在.husky中创建pre-commit（无后缀）文件
写入

npx lint-staged

并在package.json中的根object里写入lint-staged配置

"lint-staged":{"src/**/*.{ts,tsx}":["eslint --fix"]}

此时，每当你git commit的时候它都会先执行eslint

8. husky设置commit message

为了规范每次提交记录的message，我们使用commitlint规范：

feat: add new feature fix: bug fix docs: documentation changes style: formatting changes refactor: code refactoring test: adding tests chore: maintenance tasks

引入commit-lint

pnpmadd-D @commitlint/cli @commitlint/config-conventional

创建commitlint.config.js

exportdefault{extends:['@commitlint/config-conventional']}

在.husky目录中创建commit-msg（无后缀）文件并写入：

pnpmexeccommitlint --edit$1

此后后续的commit提交的message都会匹配是否以上述规范中的lint的title相匹配，比如我提交一个需求必须以：feat:开头

9. 创建.gitignore

屏蔽掉常见的本地配置/依赖项

# Dependencies node_modules .pnpm-store # Build output dist # IDE .idea .vscode *.swp *.swo # OS .DS_Store Thumbs.db # Logs *.log npm-debug.log* # Environment .env .env.local .env.*.local