前端十年从0到资深开发者的10堂必修课第6篇工程化篇——从Webpack到Vite打造现代化构建流程当项目规模扩大手动管理文件依赖、压缩代码、转换新语法变得不再现实。前端工程化应运而生它通过工具和规范帮助我们提升开发效率、保证代码质量。本篇将带你回顾模块化的演进深入 Webpack 的核心机制并拥抱新一代构建工具 Vite最后建立代码规范与 Git 提交检查打造一套完整的现代化前端工程化流程。一、模块化历史在 JavaScript 早期代码通常通过全局变量和函数组织极易导致命名冲突和依赖混乱。为了解决这些问题社区逐渐发展出多种模块化规范。1. CommonJSCommonJS 主要应用于 Node.js 环境使用require同步加载模块通过module.exports导出。// math.jsconstadd(a,b)ab;module.exports{add};// main.jsconst{add}require(./math);console.log(add(2,3));// 5由于同步加载不适合浏览器会导致阻塞CommonJS 并未被浏览器原生支持。2. AMDAsynchronous Module DefinitionAMD 专为浏览器设计支持异步加载模块。最著名的实现是 RequireJS。// 定义模块define(math,[],function(){return{add:(a,b)ab};});// 加载模块require([math],function(math){console.log(math.add(2,3));});AMD 语法相对繁琐逐渐被更优雅的方案取代。3. ES ModuleESMES6 正式引入了原生模块系统成为目前前端开发的标配。使用import和export关键字支持静态分析、树摇tree shaking等优化。// math.jsexportconstadd(a,b)ab;// main.jsimport{add}from./math.js;console.log(add(2,3));现代浏览器已原生支持 ESM但为了兼容性和附加功能如热更新、代码压缩我们依然需要构建工具。二、Webpack 核心Webpack 是目前最成熟的模块打包工具它将项目中的所有资源JS、CSS、图片等视为模块通过 loader 转换plugin 优化最终打包成浏览器可运行的静态资源。1. Entry/Output、Loader、PluginEntry入口指定 Webpack 从哪个文件开始构建依赖图。// webpack.config.jsmodule.exports{entry:./src/index.js,};Output输出配置打包后的文件输出位置和文件名。constpathrequire(path);module.exports{output:{path:path.resolve(__dirname,dist),filename:bundle.js,},};Loader加载器Webpack 原生只理解 JavaScript 和 JSON 文件。loader 让 Webpack 能够处理其他类型文件并将其转换为有效模块。babel-loader将 ES6 语法转换为兼容旧浏览器的代码。css-loader解析 CSS 文件中的import和url()。style-loader将 CSS 插入到 DOM 的style标签中。file-loader/url-loader处理图片、字体等资源。module.exports{module:{rules:[{test:/\.js$/,exclude:/node_modules/,use:babel-loader,},{test:/\.css$/,use:[style-loader,css-loader],},{test:/\.(png|svg|jpg|jpeg|gif)$/i,type:asset/resource,// Webpack 5 内置资源模块},],},};Plugin插件插件可以执行更广泛的任务如打包优化、资源管理、环境变量注入等。HtmlWebpackPlugin自动生成 HTML 文件并引入打包后的脚本。MiniCssExtractPlugin将 CSS 提取为单独文件。DefinePlugin定义全局常量。constHtmlWebpackPluginrequire(html-webpack-plugin);module.exports{plugins:[newHtmlWebpackPlugin({template:./src/index.html,}),],};2. 开发环境与生产环境配置分离实际项目中我们通常为开发和生产环境编写不同的 Webpack 配置。开发环境需要快速构建、热更新、源码映射source map。生产环境需要代码压缩、文件指纹hash、资源优化。可以使用webpack-merge合并公共配置。// webpack.common.jsmodule.exports{entry:./src/index.js,output:{filename:[name].bundle.js,path:path.resolve(__dirname,dist)},module:{rules:[...]},plugins:[...],};// webpack.dev.jsconst{merge}require(webpack-merge);constcommonrequire(./webpack.common.js);module.exportsmerge(common,{mode:development,devtool:inline-source-map,devServer:{static:./dist,hot:true},});// webpack.prod.jsconst{merge}require(webpack-merge);constcommonrequire(./webpack.common.js);constMiniCssExtractPluginrequire(mini-css-extract-plugin);module.exportsmerge(common,{mode:production,devtool:source-map,plugins:[newMiniCssExtractPlugin({filename:[name].[contenthash].css}),],optimization:{minimize:true},});通过--config指定配置文件运行。三、Vite 新时代Vite 是尤雨溪团队开发的新一代构建工具利用浏览器原生 ES Module 支持在开发环境下提供极速的服务启动和热更新生产环境则使用 Rollup 打包。1. 基于 ES Module 的极速启动在传统打包工具如 Webpack中开发服务器启动时需先打包整个应用随着项目增大启动速度会变慢。Vite 则直接将源码作为 ES Module 提供给浏览器浏览器请求哪个模块Vite 就实时转换哪个模块并返回。这意味着无需预先打包服务器启动几乎瞬间完成。工作原理启动服务器后Vite 通过index.html中的script typemodule src/src/main.js识别入口。浏览器请求main.jsVite 将源码中的裸模块导入如import React from react转换为浏览器可识别的路径如/modules/react并返回转换后的内容。对于非 JS 文件如 CSS、图片Vite 同样通过插件实时处理。2. HMR 原理与配置Vite 的热模块替换HMR比 Webpack 更高效因为它基于原生 ESM只更新变更的模块无需重新打包。配置Vite 配置文件为vite.config.js极其简洁。// vite.config.jsimport{defineConfig}fromvite;importreactfromvitejs/plugin-react;exportdefaultdefineConfig({plugins:[react()],// 支持 Reactserver:{port:3000,open:true,proxy:{/api:http://localhost:8080},},build:{outDir:dist,sourcemap:true,},});HMR API在应用中可以通过import.meta.hot接受模块更新。if(import.meta.hot){import.meta.hot.accept((newModule){// 处理更新});}Vite 的插件机制基于 Rollup 插件接口生态正迅速完善绝大多数 Webpack 的功能都能找到对应 Vite 插件。四、代码规范与质量工程化不仅包括构建工具还涵盖代码规范、提交检查等质量保证措施。1. ESLint Prettier 配置ESLint负责代码质量检查如未使用变量、潜在错误Prettier负责代码格式化如缩进、分号。两者结合使用能保持代码风格一致。安装npminstalleslint prettier eslint-config-prettier eslint-plugin-prettier --save-devESLint 配置.eslintrc.jsmodule.exports{env:{browser:true,es2021:true,node:true},extends:[eslint:recommended,plugin:react/recommended,prettier],parserOptions:{ecmaVersion:latest,sourceType:module},plugins:[react,prettier],rules:{prettier/prettier:error,react/react-in-jsx-scope:off,// React 17 无需引入 React},settings:{react:{version:detect}},};Prettier 配置.prettierrc{singleQuote:true,trailingComma:es5,tabWidth:2,semi:true}集成到编辑器在 VS Code 中安装 ESLint 和 Prettier 插件并设置保存时自动格式化。2. Git Hooks 与 lint-staged为了保证每次提交的代码都符合规范可以使用 Git Hooks 在提交前自动执行检查和格式化。husky可以方便地管理 Git Hookslint-staged只对暂存区文件运行检查。安装npminstallhusky lint-staged --save-dev配置 package.json{scripts:{prepare:husky install},lint-staged:{*.{js,jsx,ts,tsx}:[eslint --fix,prettier --write],*.{json,md}:[prettier --write]}}创建 pre-commit hooknpx huskyadd.husky/pre-commitnpx lint-staged现在每次执行git commit时都会自动对暂存区的文件进行 ESLint 检查和 Prettier 格式化确保代码质量。总结本篇我们系统学习了前端工程化的核心模块化演进从 CommonJS、AMD 到 ES Module理解了它们各自的应用场景。Webpack 核心掌握了 entry/output、loader、plugin 的配置以及如何区分开发/生产环境。Vite 新时代理解了基于原生 ESM 的极速启动和 HMR 原理体验了简洁的配置。代码规范通过 ESLint Prettier 保持代码质量利用 husky lint-staged 在 Git 提交时自动检查。工程化是前端开发效率的基石。掌握这些工具后你可以轻松搭建一个现代化、规范化的前端项目。下一篇我们将深入网络篇探讨 HTTP/HTTPS、RESTful 与 GraphQL 实战敬请期待思考题Webpack 的 Loader 和 Plugin 有什么区别能否举例说明Vite 在开发环境下为什么比 Webpack 快生产环境打包为什么选择了 Rollup如何在 Vite 项目中配置路径别名aliaslint-staged 的作用是什么如果不用它直接在 pre-commit 中运行全量检查会有什么问题欢迎在评论区分享你的见解和疑问一起讨论进步
前端十年：从0到资深开发者的10堂必修课【第6篇】
前端十年从0到资深开发者的10堂必修课第6篇工程化篇——从Webpack到Vite打造现代化构建流程当项目规模扩大手动管理文件依赖、压缩代码、转换新语法变得不再现实。前端工程化应运而生它通过工具和规范帮助我们提升开发效率、保证代码质量。本篇将带你回顾模块化的演进深入 Webpack 的核心机制并拥抱新一代构建工具 Vite最后建立代码规范与 Git 提交检查打造一套完整的现代化前端工程化流程。一、模块化历史在 JavaScript 早期代码通常通过全局变量和函数组织极易导致命名冲突和依赖混乱。为了解决这些问题社区逐渐发展出多种模块化规范。1. CommonJSCommonJS 主要应用于 Node.js 环境使用require同步加载模块通过module.exports导出。// math.jsconstadd(a,b)ab;module.exports{add};// main.jsconst{add}require(./math);console.log(add(2,3));// 5由于同步加载不适合浏览器会导致阻塞CommonJS 并未被浏览器原生支持。2. AMDAsynchronous Module DefinitionAMD 专为浏览器设计支持异步加载模块。最著名的实现是 RequireJS。// 定义模块define(math,[],function(){return{add:(a,b)ab};});// 加载模块require([math],function(math){console.log(math.add(2,3));});AMD 语法相对繁琐逐渐被更优雅的方案取代。3. ES ModuleESMES6 正式引入了原生模块系统成为目前前端开发的标配。使用import和export关键字支持静态分析、树摇tree shaking等优化。// math.jsexportconstadd(a,b)ab;// main.jsimport{add}from./math.js;console.log(add(2,3));现代浏览器已原生支持 ESM但为了兼容性和附加功能如热更新、代码压缩我们依然需要构建工具。二、Webpack 核心Webpack 是目前最成熟的模块打包工具它将项目中的所有资源JS、CSS、图片等视为模块通过 loader 转换plugin 优化最终打包成浏览器可运行的静态资源。1. Entry/Output、Loader、PluginEntry入口指定 Webpack 从哪个文件开始构建依赖图。// webpack.config.jsmodule.exports{entry:./src/index.js,};Output输出配置打包后的文件输出位置和文件名。constpathrequire(path);module.exports{output:{path:path.resolve(__dirname,dist),filename:bundle.js,},};Loader加载器Webpack 原生只理解 JavaScript 和 JSON 文件。loader 让 Webpack 能够处理其他类型文件并将其转换为有效模块。babel-loader将 ES6 语法转换为兼容旧浏览器的代码。css-loader解析 CSS 文件中的import和url()。style-loader将 CSS 插入到 DOM 的style标签中。file-loader/url-loader处理图片、字体等资源。module.exports{module:{rules:[{test:/\.js$/,exclude:/node_modules/,use:babel-loader,},{test:/\.css$/,use:[style-loader,css-loader],},{test:/\.(png|svg|jpg|jpeg|gif)$/i,type:asset/resource,// Webpack 5 内置资源模块},],},};Plugin插件插件可以执行更广泛的任务如打包优化、资源管理、环境变量注入等。HtmlWebpackPlugin自动生成 HTML 文件并引入打包后的脚本。MiniCssExtractPlugin将 CSS 提取为单独文件。DefinePlugin定义全局常量。constHtmlWebpackPluginrequire(html-webpack-plugin);module.exports{plugins:[newHtmlWebpackPlugin({template:./src/index.html,}),],};2. 开发环境与生产环境配置分离实际项目中我们通常为开发和生产环境编写不同的 Webpack 配置。开发环境需要快速构建、热更新、源码映射source map。生产环境需要代码压缩、文件指纹hash、资源优化。可以使用webpack-merge合并公共配置。// webpack.common.jsmodule.exports{entry:./src/index.js,output:{filename:[name].bundle.js,path:path.resolve(__dirname,dist)},module:{rules:[...]},plugins:[...],};// webpack.dev.jsconst{merge}require(webpack-merge);constcommonrequire(./webpack.common.js);module.exportsmerge(common,{mode:development,devtool:inline-source-map,devServer:{static:./dist,hot:true},});// webpack.prod.jsconst{merge}require(webpack-merge);constcommonrequire(./webpack.common.js);constMiniCssExtractPluginrequire(mini-css-extract-plugin);module.exportsmerge(common,{mode:production,devtool:source-map,plugins:[newMiniCssExtractPlugin({filename:[name].[contenthash].css}),],optimization:{minimize:true},});通过--config指定配置文件运行。三、Vite 新时代Vite 是尤雨溪团队开发的新一代构建工具利用浏览器原生 ES Module 支持在开发环境下提供极速的服务启动和热更新生产环境则使用 Rollup 打包。1. 基于 ES Module 的极速启动在传统打包工具如 Webpack中开发服务器启动时需先打包整个应用随着项目增大启动速度会变慢。Vite 则直接将源码作为 ES Module 提供给浏览器浏览器请求哪个模块Vite 就实时转换哪个模块并返回。这意味着无需预先打包服务器启动几乎瞬间完成。工作原理启动服务器后Vite 通过index.html中的script typemodule src/src/main.js识别入口。浏览器请求main.jsVite 将源码中的裸模块导入如import React from react转换为浏览器可识别的路径如/modules/react并返回转换后的内容。对于非 JS 文件如 CSS、图片Vite 同样通过插件实时处理。2. HMR 原理与配置Vite 的热模块替换HMR比 Webpack 更高效因为它基于原生 ESM只更新变更的模块无需重新打包。配置Vite 配置文件为vite.config.js极其简洁。// vite.config.jsimport{defineConfig}fromvite;importreactfromvitejs/plugin-react;exportdefaultdefineConfig({plugins:[react()],// 支持 Reactserver:{port:3000,open:true,proxy:{/api:http://localhost:8080},},build:{outDir:dist,sourcemap:true,},});HMR API在应用中可以通过import.meta.hot接受模块更新。if(import.meta.hot){import.meta.hot.accept((newModule){// 处理更新});}Vite 的插件机制基于 Rollup 插件接口生态正迅速完善绝大多数 Webpack 的功能都能找到对应 Vite 插件。四、代码规范与质量工程化不仅包括构建工具还涵盖代码规范、提交检查等质量保证措施。1. ESLint Prettier 配置ESLint负责代码质量检查如未使用变量、潜在错误Prettier负责代码格式化如缩进、分号。两者结合使用能保持代码风格一致。安装npminstalleslint prettier eslint-config-prettier eslint-plugin-prettier --save-devESLint 配置.eslintrc.jsmodule.exports{env:{browser:true,es2021:true,node:true},extends:[eslint:recommended,plugin:react/recommended,prettier],parserOptions:{ecmaVersion:latest,sourceType:module},plugins:[react,prettier],rules:{prettier/prettier:error,react/react-in-jsx-scope:off,// React 17 无需引入 React},settings:{react:{version:detect}},};Prettier 配置.prettierrc{singleQuote:true,trailingComma:es5,tabWidth:2,semi:true}集成到编辑器在 VS Code 中安装 ESLint 和 Prettier 插件并设置保存时自动格式化。2. Git Hooks 与 lint-staged为了保证每次提交的代码都符合规范可以使用 Git Hooks 在提交前自动执行检查和格式化。husky可以方便地管理 Git Hookslint-staged只对暂存区文件运行检查。安装npminstallhusky lint-staged --save-dev配置 package.json{scripts:{prepare:husky install},lint-staged:{*.{js,jsx,ts,tsx}:[eslint --fix,prettier --write],*.{json,md}:[prettier --write]}}创建 pre-commit hooknpx huskyadd.husky/pre-commitnpx lint-staged现在每次执行git commit时都会自动对暂存区的文件进行 ESLint 检查和 Prettier 格式化确保代码质量。总结本篇我们系统学习了前端工程化的核心模块化演进从 CommonJS、AMD 到 ES Module理解了它们各自的应用场景。Webpack 核心掌握了 entry/output、loader、plugin 的配置以及如何区分开发/生产环境。Vite 新时代理解了基于原生 ESM 的极速启动和 HMR 原理体验了简洁的配置。代码规范通过 ESLint Prettier 保持代码质量利用 husky lint-staged 在 Git 提交时自动检查。工程化是前端开发效率的基石。掌握这些工具后你可以轻松搭建一个现代化、规范化的前端项目。下一篇我们将深入网络篇探讨 HTTP/HTTPS、RESTful 与 GraphQL 实战敬请期待思考题Webpack 的 Loader 和 Plugin 有什么区别能否举例说明Vite 在开发环境下为什么比 Webpack 快生产环境打包为什么选择了 Rollup如何在 Vite 项目中配置路径别名aliaslint-staged 的作用是什么如果不用它直接在 pre-commit 中运行全量检查会有什么问题欢迎在评论区分享你的见解和疑问一起讨论进步
