Webpack 将目录中同名的所有文件输出到不同的文件夹中

Question

我有以下目录：

  - src/

    - js/

      - profile1/

        - script1.js

        - script2.js

      - profile2/

        - script3.js

        - script4.js

      - script5.js

  - dist/

    - js/

  package.js

  webpack.config.js

我正在尝试将所有 JS 文件打包到保留相同命名和文件夹结构的文件夹/src/js中。dist/js

我可以为每个文件编写不同的配置，并对每个 JS 文件进行 webpack，但我想知道是否有一组配置可以一次性完成所有操作。

我努力了：

const path = require('path');

module.exports = {

  entry: './src/js/*.js',

  output: {

    filename: '*.js',

    path: path.resolve(__dirname, 'dist'),

  }

}

惨败。

Answer 1

您可以像使用glob一样先匹配入口文件（使用 来安装它npm i glob）。[name]然后您可以通过附加到 来动态更改输出output.filename。这是完整的代码：const path = require('path');const glob = require('glob');module.exports = {  entry: Object.fromEntries(glob.sync(path.resolve(__dirname, 'src/js/**/*.js')).map((v) => [    v.split('src/js/')[1], v,  ])),  output: {    filename: '[name]',    path: path.resolve(__dirname, 'dist/js'),  },};