Сейчас у меня вебпак сконфигурирован следующим образом:
- Я получаю бандл для 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',
}),
]
}
Простой
