webpack-dev-server-inject-scripts Webpack脚本注入中间件
webpack-dev-server 的脚本注入利器，叫webpack-dev-server-inject-scripts，挺适合跟传统后端一起开发用的。尤其是你在搞老 CMS、没法直接返回 JSON 的项目时，用这个会省不少事。
开发单页应用（SPA）的时候，webpack-dev-server确实好用。但你要是想跟服务端渲染的后端整合——比如页面模板是在后端写好的，还不支持动态 JSON，那就容易卡住。你会想：我到底要手动在layout.html里插入哪些 Webpack 打包出来的文件？要是我改了个文件名，是不是又要重新改模板？
webpack-dev-server-inject-scripts就了这个烦恼。它是个http-proxy-middleware的中间件，用来在开发时动态把 Webpack 生成的script和link标签注入到你后端返回的 HTML 里。整个流程比较自动化，脚本路径也不会写死，改配置或重命名都不怕。
实际用法也不复杂。你在express或者koa里加个代理，把前端求转发到webpack-dev-server，这个中间件就在中途帮你把脚本插进去。开发体验跟你直接用HtmlWebpackPlugin一样顺滑。
要注意，这个库现在还没到1.0.0，API 会有变。所以比较适合内部项目，或者你愿意自己改改源码的场景。如果你只是图省事，又用的是后端模板，那这个工具真的蛮香。
如果你不熟http-proxy-middleware，可以看看Nuxt.js 中使用 http-proxy-middleware 进行代理配置，原理是一样的。
还有相关资料可以一起看：
如果你现在正好在做一个老系统的前端改造，不妨试试这个插件，省心不少。
文件大小：18.29KB
评论区