Как сконфигурировать вебпак, чтобы на выходе получать два вида файлов?

Question

[Дима Шишкин]

Сейчас у меня вебпак сконфигурирован следующим образом:

• Я получаю бандл для js
  
• Получаю бандл для css
  
• В зависимости от того dev или prod версия я получаю файлы сжатые, с постфиксом min и с сорсмапами или нет.
  

Меня такое поведение не устраивает я хочу на выходе всегда получать четыре файла:

• bundle.min.js - сжатый бандл без сорсмапов
  
• bundle.js - не сжатый бандл с сорсмапами
  
• styles.min.css - сжатые стили без сорсмапов
  
• styles.css - не сжатые стили без сормапов.
  

Я думал просто одновременно запускать сборку и для prod, и для dev, но тут два минуса:

• Необходимость запускать две сборки одновременно.
  
• У меня есть клинер, который чистит директорию build. Выходит так, что одна из версий удаляется.
  

Мой конфиг вебпака:

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isDev = process.env.NODE_ENV === 'development';

module.exports = {
	mode: process.env.NODE_ENV,
	entry: './source/index.ts',
	devtool: isDev && 'inline-source-map',
	watch: true,
	resolve: {
		extensions: ['.ts', '.js']
	},
	output: {
		filename: isDev ? 'bundle.js' : 'bundle.min.js',
		path: path.resolve(__dirname, 'build')
	},
	module: {
		rules: [
			{
				test: /\.tsx?$/,
				use: 'ts-loader',
				exclude: /node_modules/
			},
			{
				test: /\.scss$/,
				use: [
					'style-loader',
					{
						loader: MiniCssExtractPlugin.loader,
						options: {
							hmr: isDev,
						},
					},
					'css-loader',
					'postcss-loader',
					'sass-loader',
				]
			},
		]
	},
	plugins: [
		new CleanWebpackPlugin(),
		new MiniCssExtractPlugin({
			filename: isDev ? 'styles.css' : 'styles.min.css',
		}),
	]
}

Answer 1

[Дмитрий]

Попробуйте выполнять единственную сборку без сжатия и source maps, а затем прогонять нужные бандлы через standalone-версии минификаторов (то есть уже после окончания сборки, вне её). Например с помощью этого https://www.npmjs.com/package/webpack-shell-plugin

Или экспортировать из файла с конфигом вебпака не один конфиг, а массив из двух: https://webpack.js.org/configuration/configuration...

Comments

[Дима Шишкин]

Я попробую, спасибо большое за идеи.