对于传统前端开发是否和webpack之类的工具相冲突？

Question

传统的前端开发是与后端语言深度结合的。

• 前端提供静态页由后端进行动态渲染。

这造成HTML是不能进行打包的。因为后端程序员需要修改静态HTML。（HTML中添加后端模板语言）

• 当HTML不能打包时导致实际开发环境的HTML和你本地的HTML是不同步的。

为什么会不同步？因为后续的维护和新需求都是在后端动态代码上进行。不可能每个维护和新需求都提交静态HTML然后让后端程序员重新动态渲染一遍。

• 当HTML不同步时导致CSS和JavaScript也只能基于实际开发环境的HTML进行配套开发。

要使本地的静态HTML和实际开发环境的HTML同步不现实。这导致只能修改打包后的CSS和JavaScript（实际开发环境的CSS和JavaScript）。这导致CSS和JavaScript也不能打包。因为谁也不想修改打包后的代码。

以上是最近个人的思考。因为现在所处工作的团队已经没有使用传统开发的情况了。但是鉴于还有很多公司还在使用传统方式进行开发。为防止以后出现产品经理要求将传统项目强行转换成webpack所进行的思考。

不知道我的说法是否正确。是否可以在后端程序员完全不懂JS的情况下将传统开发方式切换到现代开发方式？

Answer 1

webpack 给开发者的自由度还是比较高的，在前后端不分离的前提下，使用 webpack 可能会比较麻烦，但也仅仅是比较麻烦而已。

我现在手头的项目就是基于 thinkphp 的，前后端也没有分离，但是幸好只是个官网，动态内容不多，所以无碍我使用 webpack 来引入“现代化”的开发方案，以便愉快地搬运 npm 上的宝贵财富。

HTML 方面，本来想研究下 eggjs 或者 nextjs ，以便使用 Vue 或者 React 的模块化方案，但是时间比较紧，所以用 ejs 做了 HTML 的模块化。这一操作遗祸甚多：我需要写 ejs 来粘合各个模块，然后用 thinkphp 的模板语言来引入变量，最后用 Vue 来赋能页面动态内容。HTML 勉强算是可以“打包”了，输出的 HTML 文本扔给后端进行渲染。

JS、CSS 方面，一开始想的是使用 snowpack 以支持 ESM 的使用，然后使用 babel 降级支持比较旧的浏览器，但是时间紧迫，为了避免填坑，snowpack 的使用需要无期限延后了。鉴于以 snowpack、Vite 为代表的真“现代化”开发方式尚未流行开来，这种方式也还算现代化。

从上面也看得出来，整个项目中最难搞的是 HTML 。html-webpack-plugin 能给予的帮助有限，需要写一些 node 代码来辅助；另外我必须手工“烘焙”出首屏的静态内容，以免让用户看到 vue 初始化前模板的狼狈模样，这使得工作量有所增加。

所以，虽然我的一些设想未能实现，但还是可以证明：即便是以后端主导方式开发的老旧项目，仍旧可以使用时下流行的工程化方案，这一过程与后端全无关系。当然，冲突和不便在所难免，配置的学习和试错成本也比较高。