如何使用 Webpack 使用 Babel 构建（同时保留源的文件夹结构）？答案

【问题标题】：How can I build with Babel (while preserving the source's folder structure) with Webpack?如何使用 Webpack 使用 Babel 构建（同时保留源的文件夹结构）？
【发布时间】：2017-12-29 02:01:03
【问题描述】：

我有一个类似这样的层次结构的项目：

-src/ -app.js (only accesses server-side code) -server/ -models/ -routes/ ... -client/ -views/ -scss/ -style1.scss -style2.scss ... -js/ -index.js (es6) -other-page.js (es6) ... ... -.babelrc -package.json -webpack.config.js ...

我希望 Webpack 复制 src 中的所有内容，用 Babel 编译的等效文件替换 .js 文件，并用编译的 CSS 替换 .scss 文件。像这样：

-dist/ -app.js -server/ -models/ -routes/ ... -client/ -views/ -css/ -style1.css -style2.css -js/ -index.js (now compiled) -other-page.js (now compiled) ... ...

src/server/ 中有非 js 文件，所以我认为不可能将其中的所有内容合并到 app.js 中。不过，对于我的问题，我们将不胜感激。

【问题讨论】：

标签： javascript node.js webpack ecmascript-6 babeljs

【解决方案1】：

Webpack 可能不适合这项工作。它自称为module bundler，因此它的功能集非常严格地专注于这一目标：将事物捆绑在一起。我认为 gulp 对于这样的事情会更好。

但是，您想要这样做的原因是什么？

顺便说一句：如果您真的必须这样做，您可以使用copy-webpack-plugin 来完成，它能够将文件和文件夹复制到其他目的地。插件接受一个transform 属性，您可以在其中传入函数。我不能轻易想到它是如何工作的，但也许你可以在那里做点什么。同样，我不知道您为什么需要以这种方式精确实现它。

【讨论】：