webpack打包怎么才可以按照目录输出

Question

现在打包出去也就一个或者多个js文件，怎么才可以按照目录来打包

类似这样，打包之后成这个样子

Answer 1

webpack是处理模块依赖的一种方案，是有依赖逻辑在里面的，虽然可以实现多入口的多页面文件打包，但像这样的目录结构输出的话需要手动配置；

这样的话感觉webpack并不适合你这个项目，还是用grunt打包吧，只做单纯的编译，不做依赖逻辑处理。打包出的文件结构不会发生变化。https://www.gruntjs.net/

Answer 2

这个问题用 webpack 应该是可以解的，题主可以参考下面的配置配一下 Transpile Webpack Plugin(transpile-webpack-plugin)：

const TranspilePlugin = require('transpile-webpack-plugin');

module.exports = {
  entry: ['./lib/cards/index.js', /* ... */],
  output: {
    path: __dirname + '/dist',
  },
  plugins: [new TranspilePlugin({ longestCommonDir: './lib' })],
};

这个插件会自动收集 entry 直接或间接引用到的全部文件作为输入文件，在编译后，再按照与输入文件相同的目录格式输出到输出目录里。配置项的含义可以看这里，另外也可以看下这篇文章。