duboloms
@duboloms
Люблю есть дубы с кетчупом. Веб-разработчик.

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

Как сделать два выхода в 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")}`
    }))
  ]
};


Как это сделать?
  • Вопрос задан
  • 114 просмотров
Пригласить эксперта
Ответы на вопрос 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 сделать нельзя.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы