我们都知道现在属于前端工程时代，前端工程对于我们的前端开发来说非常重要。但是小庄觉得自己对前端工程的理解还不够，需要学习的地方还有很多。因此，在这一节中，小庄打算带大家好好了解一下前端工程。本节小庄将详细记录前端构建工具的配置技巧之一，即webpack极速配置技巧。前端工程——概述随着前端开发的功能需求越来越高，业务逻辑也越来越复杂。传统刀耕火种的开发方式已经不适合现代的开发要求。前端工程是指遵循一定的标准和规范，利用工具来提高开发效率和降低成本。开发过程中的许多脏工作应该由自动化工具来完成。工程：可以简单理解为项目（如网站、APP等）；工程：实现一个项目的具体过程、技术、工具、规范等。涉及从立项、开发到上线运营的全过程；前端工程是通过各种工具和技术来提高前端开发效率的过程。需要解决的主要问题前端工程需要解决的主要问题如下：重复机械工作：部署上线前，需要手动压缩代码和资源文件。传统语言或语法的缺点：如果使用ES6+和CSS3的新特性，会存在兼容性问题。使用Less/Sass/PostCSS增强CSS的可编程性，但运行环境不支持。统一代码风格和质量保证：多人协作开发，不可能硬性统一大家的代码风格。依赖后端服务接口支持：在开发某些功能时，需要提前等待后端服务接口完成。包含的工具和技术前端工程包含的工具和技术如下：前端构建工具示例：webpack、vite、Grunt、Gulp，当然还有各种脚手架工具。自动化构建，模块化，打包，标准化，自动化测试，自动化部署，vite和webpack的区别，众所周知，前端构建工具有不同的区别。但在这里，我们将首先关注比较vite和webpack。如果你对其他的前端构建工具感兴趣，也可以自己对比一下。vite和webpack的具体对比如下：可以看出，使用JS开发的工具通常需要很长时间才能启动开发服务器，而这个启动时间与代码量和代码复杂度呈正相关。即使使用HMR，修改后的文件也需要几秒钟才能反映在浏览器中，例如Webpack。那么Vite是如何解决像Webpack这样的复杂多模块项目开发中启动慢、HMR慢的问题呢？我们在开发环境中详细对比了Vite和Webpack，发现主要区别如下：WebpackVite首先打包生成bundle，然后启动开发服务器。先启动开发服务器，利用新一代浏览器的ESM能力，直接请求需要的模块，无需打包。而实时编译HMR时，需要更改所有模块和相关依赖。编译HMR时，只需要让浏览器再次请求该模块，利用浏览器的缓存（源码模块协商缓存，依赖模块强缓存）来优化请求内存的高效使用——因此，解决了开发环境启动慢，Vite开发环境冷启动时无需打包或分析模块间的依赖关系，启动开发服务器前无需编译。它还会在启动时使用esbuild进行预构建。Webpack启动后，会做很多事情。它将经历一个漫长的编译和打包链。从入口开始，需要逐步经过语法分析、依赖收集、代码翻译、打包合并、代码优化，最终编译出高版本、离散的源代码。打包成低版本、高兼容性的产品代码，充满了CPU和IO操作，Node运行时肯定会出现性能问题。对于HMR的慢，即使只有很小的改动，Webpack仍然需要构建一个完整的模块依赖图，并根据依赖图进行转换。不过Vite使用了ESM和浏览器缓存技术，更新速度与项目复杂度无关。可以看出，对于Snowpack、Vite等非打包的构建工具，在开发环境启动时只需要启动两台服务器，一台用于页面加载，一台用于HMR的Websocket。当浏览器发送原生ESM请求时，服务器端收到请求后只需要编译当前文件返回给浏览器即可，不需要管理依赖。但是同样的，vite也有一些不足，就是：生态不如webpack，loader和插件不够丰富。生产环境esbuild对css和代码分割不够友好，没有大规模大量使用，会隐藏一些问题。所以，这里还是以webpack的配置为主进行说明。快速的webpack配置技巧1.使用npminit生成package.json2.安装五个基础包。五个基础包如下：安装webpack的三大组件：webpack,webpack-cli,webpack-dev-server安装和处理js使用的loader，比如处理es6,es7,es8,decorators来制作浏览器可以识别的es5。安装处理css预编译的加载程序，例如sass-loader。sass-loader,node-loader,css-loader,style-loader安装处理模板的加载器，例如：ejs-loader，处理后的模板后缀为.tpl。ejs-loader安装一个处理html的插件，例如：html-webpack-plugin。html-webpack-plugin3。在webpack.config.js中配置项目运行（1）本示例项目结构目录如下：（2）webpack.config.js配置如下：/*下面是快速配置的例子webpack*/constpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={//模式分为开发和生产mode:'development',entry:{index:path.resolve(__dirname,'./src/js/index.js'),},output:{path:path.resolve(__dirname,'./dist'),//注意：[name]是一个变量，[name].js会对应入口filename:'./js/[name].js'中的index.js},module:{rules:[{test:/\.js$/,loader:'babel-loader',exclude:path.resolve(__dirname,'./node_modules')},{test:/\.css$/,//注意：在webpack中使用loader时，是倒序处理的，所以使用还需要反转putuse:['style-loader','css-loader']},{测试：/\.scss$/，使用：['style-loader'，'css-loader'，'sass-loader']}，{测试：/\.tpl$/，加载器：'ejs-loader'}]},plugins:[newHtmlWebpackPlugin({//1.打包后的文件名filename:'index.html',//2.要打包的html模板，即index.htmltemplate:path.resolve(__dirname,'./src/index.html'),/*3.打包后的index.html中要引入的js文件，其中入口对象的key存放在数组chunks中，这里的key值为index*/chunks:['index'],/*4.排除打包后的index.html中引入的js文件，数组excludeChunks存放的是entry对象的key，这里的key值为node_modules，如果entry没有里面的key值没有node_modules也无所谓，写了也不会报错。*/excludeChunks:['node_modules']})],devServer:{open:true,host:'localhost',port:3300}};4.在package.json中配置运行项目的命令5.在终端中使用npm运行dev查看效果：
