项目模板
模板地址
如果急用，直接使用当前模板即可。点击右上角Use This Template即可创建一个新的项目。
背景
当我每每创建一个新的webpack项目时，总是需要经过繁琐的webpack配置来完成项目的init。如果从网络上搜寻快速的setup总会遇到各种各样的问题（由于包的版本有更新，有些配置已经废弃掉了）所有我决定搭建自己的webpack配置模板。
搭建步骤
1. pnpm 开启webpack项目
1.1 生成package.json
pnpminit1.2 引入webpack
pnpmadd-D webpack webpack-cli webpack-dev-server1.3 引入typescript
pnpmadd-D typescript ts-node @types/node1.4 引入react
pnpmaddreact react-dompnpmadd-D @types/react @types/react-dom2. 初始化react代码
2.1 创建src/app.tsx
constApp=()=>{return<div>Hello World</div>}exportdefaultApp2.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'}exportdefaultconfig3.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'}exportdefaultconfig3.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'}exportdefaultconfig4. 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-staged7.1 初始化git仓库
gitinit7.2 初始化husky
- npx方式
npx husky init- pnpm方式
pnpmexechusky init7.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
