Как сделать два output в webpack?

Question

[Дуболом Одноклеточный]

Как сделать два выхода в webpack конфиге?
Мне нужно, чтобы js выходил в папку dist, а html (скомпилированный pug) выходил в папку public.

Вот пример конфига с pug:

const fs = require("fs");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const PAGES_DIR = path.join(__dirname, "/src/pug/pages")
const PAGES = fs.readdirSync(PAGES_DIR)
  .filter(fileName => fileName.endsWith(".pug"));

module.exports = {
  mode: "development",
  entry: path.join(__dirname, "/src/js/app.js"),
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js"
  },
  devServer: {
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: "pug-loader"
      }
    ]
  },
  plugins: [
    ...PAGES.map(page => new HtmlWebpackPlugin({
      template: `${PAGES_DIR}/${page}`,
      filename: `./${page.replace(/\.pug$/, ".html")}`
    }))
  ]
};

Как это сделать?

Answer 1

[Ксения П.]

Если вы хотите чтобы на верхнем уровне у вас было 2 папки dist и public, то в output нужно указать '/' и в генерируемых css, js и html указывать полный путь:

output: {
path: path.join(__dirname, "/"),
filename: "/dist/bundle.js"
},
filename: `/public/${page.replace(/\.pug$/, ".html")}`

2 output сделать нельзя.