这些问题概括起来为一个问题，就是前端工程化

那有人可Neng会问了为什么需要前端工程化，前端本身就是html,css,js这三个文件，全部放在一起不就行了吗？是的，搁在十几二十年前，静态网页盛行的那个年代这么Zuo完全行得通。

但是随着时代在变化，技术在发展，静态网页远不Neng满足现代社会的需求。

现代网页为了Neng将产品的效果展示出来会大量的运用到图片，有的甚至会上视频和音频等等，从多个感官传达给用户。

同时前端开发者为了减轻开发负担，会引入各式各样的前端库，例如常见的UI库Vue、React等等，状态管理库Pinia、Redux等等。

这些各种各样的文件类型，库文件等等Ru果不集中起来管理，Zui直接导致的结果就是代码难以维护。

到时候HTML文件里这里一个script标签引入这个库，那里一个引入那个库，Zui关键的是Ru果库废弃了怎么办？这些dou无疑增加了维护成本。

浏览器只认识HTML、CSS和JS三种 文件类型啊，你库里的.vue文件怎么让浏览器运行起来？

因此前端工程化主要就是为了解决这两个问题而存在的

其实这个事情在前端术语中就叫Zuo打包，Ru果你用过webpack、vite这类型打包工具那一定不陌生，它就是前端工程化中一个Zui重要的环节。

知道了目的以后接下来就是怎么Zuo？在我们项目里如何落地？我们不妨从之前BFF层的构建开始寻求灵感，既然后端的核心架构是利用解析引擎将项目中各个业务模块加载并收拢在一起运行在内存中进而提供服务的这种模式，那么前端Neng不Neng也借鉴这样的思想来完成这个工作呢？Ke以的兄弟，一定是Ke以的，不然我也没必要花那么大精力来写这篇文章了。

mode: 'production',//指定开发模式为生产环境 //产物输出路径配置，因为开发和生产环境输出不一致，所以在各自环境中进行配置 output: { filename: 'js/_.bundle.js', path: path.join, './app/public/dist/prod'), //决定了打包后产物所在的根目录； /** * 注意path + filename才是Zui终打包后js生成的目录，比如path定义为/dist,filename定义为js/xxx.js，那么Zui终打包后生成的js文件将落地在dist/js/xxx.js处 * Zui终生成的js文件的所在路径就是代码中资源寻址的根路径，比如我们源代码中有一行代码为，那么打包后这份代码将从dist/js/xxx.js处出发去寻找/assets/xxx.png * 通常情况下这样子是肯定寻址寻不到对应的静态资源的，所以我们会配置publicPath这么一个属性，指定代码中的静态资源的寻址根路径 * 例如指定的是/dist，那么代码中静态资源的寻址就会变成，也就是说有了这个配置项后webpack会为我们自动补齐这个寻址前缀，因此代码会从/dist出发去寻找/assets/xxx.png */ publicPath: '/dist/prod', crossOriginLoading: 'anonymous', }, module: { rules: }, { test: /\.js$/, include: , //只对业务代码进行babel-loader的编译解析 use: 'happypack/loader?id=js' } ] }, performance: { hints: false }, plugins: , { root: path.resolve, 'app'), exclude: , verbose: true, dry: false, }), //提取css的公共部分，有效利用缓存， new MiniCssExtractPlugin({ chunkFilename: 'css/_.bundle.css', }), //优化并压缩CSS资源 new CSSMinimizerPlugin, //多进程打包JS，加快打包速度 new HappyPack({ ...happyPackCommonConfig, id: 'js', loaders: , plugins: })}`] }), //多进程打包CSS，加快打包速度 new HappyPack({ ...happyPackCommonConfig, id: 'css', loaders: }), //浏览器在请求资源时不发送用户的身份凭证 new HtmlWebpackInjectAttributesPlugin({ crossorigin: 'anonymous', }) ], optimization: { minimize: true, minimizer: } }

这里着重讲解几个配置项和插件吧

那么如何增加热geng新功Neng呢？在webpack项目里Zui简单的一种方式就是配置devServer这个配置项。

//本地开发启动devServer const express = require; const path = require; const webpack = require; const consoler = require const devMiddleware = require; const hotMiddleware = require; const app = express; //从 webpack.dev.js 获取 webpack配置和 devServer 配置 const { webpackConfig, DEV_SERVER_CONFIG } = require const compiler = webpack; //指定静态文件目录 app.use, 'app', 'public', 'dist'))) // 引用 devMiddleware中间件，监控文件改动 app.use(devMiddleware(compiler, { //落地文件 writeToDisk: filePath => filePath.endsWith, //资源路径 publicPath : webpackConfig.output.publicPath, //headers配置 headers:{ 'Access-Control-Allow-Origin':'*', 'Access-Control-Allow-Methods':'GET,POST,PUT,DELETE,PATCH,OPTIONS', 'Access-Control-Allow-Headers':'X-Requested-With, Content-Type,Authorization', }, stats:{ colors:true } })) // 引用hotMiddleware中间件 app.use(hotMiddleware(compiler,{ path:`/${DEV_SERVER_CONFIG.HMR_PATH}`, log : =>{} })) consoler.info //启动 dev-server const port = DEV_SERVER_CONFIG.PORT; app.listen BFF层与服务端渲染

在建立我们的BFF层后我们其实就有了服务端渲染的Neng力。

//获取用户所请求的页面模板文件，将内部所需要的数据填充好以后汇总成HTML字符串然后发送给前端浏览器

BFF层的作用是处理前端请求并返回数据，同时也Ke以进行服务端渲染。

//前后端分离的架构对于该项目而言是有必要实现的

//本地开发启动devServer //从 webpack.dev.js 获取 webpack配置和 devServer 配置 //指定静态文件目录 // 引用 devMiddleware中间件，监控文件改动 // 引用hotMiddleware中间件 //启动 dev-server

//开发阶段的 entry 配置需要加入 hmr
Object.keys.forEach {
        baseConfig.entry = ,
<!-->
<!-- webpack-hot-middleware/client?path=http://${DEV_SERVER_CONFIG.HOST}:${DEV_SERVER_CONFIG.PORT}/${DEV_SERVER_CONFIG.HMR_PATH}&amp;timeout=${DEV_SERVER_CONFIG.TIMEOUT}&amp;reload=true
<!---->
<!-- webpack-hot-middleware/client?path=http://${DEV_SERVER_CONFIG.HOST}:${DEV_SERVER_CONFIG.PORT}/${DEV_SERVER_CONFIG.HMR_PATH}&amp;timeout=${DEV_SERVER_CONFIG.TIMEOUT}&amp;reload=true
//生产环境webpack配置
const webpackConfig = merge.smart,'./app/public/dist/dev'),//决定了打包后产物所在的根目录；publicPath:`http://${DEVSERVERCONFIG.HOST}:${DEVSERVERCONFIG.PORT}/public/dist/dev/',globalObject:'this',},devtool:'source-map',//开发阶段插件plugins:]})module.exports={//webpack配置webppackConfig,//devServer配置暴露给dev使用DEVRCONFIG,};