Webpack output 將同一個目錄下的所有文件放到不同的文件夾中

Question

我有以下目錄：

  - src/
    - js/
      - profile1/
        - script1.js
        - script2.js
      - profile2/
        - script3.js
        - script4.js
      - script5.js
  - dist/
    - js/
  package.js
  webpack.config.js

我正在嘗試將/src/js中的所有 JS 文件 webpack 放入dist/js文件夾中，並保留相同的命名和文件夾結構。

我可以為每個文件和 webpack 每個 JS 文件編寫一個不同的配置，但我想知道是否有一組配置可以讓我一次性完成所有操作。

我努力了：

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 來動態更改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'),
  },
};