共计 2216 个字符，预计需要花费 6 分钟才能阅读完成。
作为 Web 开发者，你是否纠结过如何用 Webpack 做文件转译？就像 Babel CLI 转译文件那样依照源文件的目录构造输入？如果有，那么这篇文章就是为你而写，咱们一起瞧一瞧怎么做吧。
Webpack 与 bundling
在素日的印象中，仿佛 Webpack 就等于 bundling，就如官网文档首页写的那样 “bundle your …”，看上去 Webpack 就是来做 bundling 的。在浏览器上，bundles 的确很不错，可能以十分正当的策略加载和执行。但在 NodeJS 中，事件就变得有点不同了。
在 NodeJS 中，以分文件的形式组织和执行 JS 文件通常是更天然的实际，次要是因为源文件门路相干的逻辑有时是防止不了的，比方：在云函数或 Serverless 中注册事件、在某些 CLI 辅助下生成的源代码。然而，想要在这根底上增加服务端渲染（SSR）逻辑，思考到前端局部可能曾经用 Webpack 援用了各式各样的文件，后端局部可能也不得不用 Webpack 做 bundling。但这也意味着，咱们不得不做相当量的工作来让 bundles 能够正当适配这些源文件门路相干的逻辑。
为了更轻松的在 NodeJS 中应用 Webpack，Transpile Webpack Plugin(transpile-webpack-plugin) 便诞生了。这个插件可能将 entry 援用到的全副文件列为输出文件，通过编译，再依照雷同的目录格局输入到输入目录中。咱们一起看一下用法吧。
根本用法
给定在目录 src 下有 2 个文件，其中一个导出字符串常量，另一个援用这个常量而后打印进去。初始的文件构造大体如下：
.
├── src/
│ ├── constants.js
│ └── index.js
├── package.json
└── webpack.config.js 当初，咱们要把目录 src 下的文件应用 Webpack 转译到目录 dist 下，像这样：
.
├── dist/
│ ├── constants.js
│ └── index.js
... 首先，咱们须要保障 webpack(v5) 和 webpack-cli(v4) 曾经装置好：
$ npm i -D webpack webpack-cli 而后，装置 transpile-webpack-plugin(v1)：
$ npm i -D transpile-webpack-plugin 之后，调整 webpack.config.js：
const TranspilePlugin = require('transpile-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {path: __dirname + '/dist',},
plugins: [new TranspilePlugin()],
}; 最初，执行 npx webpack。这样，所有间接或间接被 entry 援用到的文件都会被收集为输出文件，之后，以输出文件的共有门路为基准目录，计算失去输入目录下各个文件的绝对输入门路，再以这些门路生成输入文件，保留源文件的目录构造。咱们能够通过 node dist/index.js 或查看生成的代码来验证输入。
解决 SSR
假如有前端局部已用 Webpack 搭建结束，其中波及了各种文件的转换和非 JS 动态资源的 emitting，当初想要在后端局部（NodeJS 服务器）做 SSR，但在运行时保留源文件的目录构造。
那么咱们只须要复用前端局部的 Webpack 配置的根底上，敞开所有非 JS 动态资源的 emitting、将 new TranspilePlugin() 退出到 plugins 即可。Transpile 插件曾经通过了严格测试能够完整兼容包含 resolve 别名、externals、source map 等在内的各种 Webpack 设置。
更多用法
Transpile 插件有着若干个可用的配置项，其中最有罕用的两个可能是 longestCommonDir 和 extentionMapping。
默认状况下，Transpile 插件应用输出文件的共有目录作为基准目录计算各个输入文件在输入目录下的相对路径。但有时输出文件可能会在嵌套比拟深的目录上面，如果咱们想要保留这种嵌套构造，就能够应用 longestCommonDir。给定输出文件 src/server/index.js、src/server/constants/greeting.js 和输入目录 dist，当这个配置为 undefined，输入文件会是 dist/index.js、dist/constants/greeting.js。而这个配置为 './src'，输入文件会是 dist/server/index.js、dist/server/constants/greeting.js。
默认状况下，Transpile 插件生成的输入文件具备与输出文件雷同的文件名。（NodeJS 会把不意识后缀的文件视为 JS 文件。）但有时咱们会想变换一下文件后缀，比方从 .ts 变换为 .js，那么通过配置项 extentionMapping 为 {'.ts': '.js'} 就能够做到。
探讨问题？
心愿 Transpile Webpack Plugin(transpile-webpack-plugin) 让咱们更轻松的在 NodeJS 中应用 Webpack。有任何问题或任何倡议，能够在评论区留言或间接在 transpile-webpack-plugin/issues 发动 issue，欢送独特探讨。
