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

pwuypxnk  于 2022-11-13  发布在  Webpack
关注(0)|答案(1)|浏览(333)

我有以下目录:

- 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'),
  }
}

惨败。

m1m5dgzv

m1m5dgzv1#

你可以像使用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'),
  },
};

相关问题