Проблема с автопрефиксом и минимизацией CSS в конфигурации Webpack ⇐ CSS

[Anonymous]

Мне сложно заставить мой CSS правильно применить автопрефикс и минификацию в настройке Webpack. Несмотря на то, что я следовал различным руководствам и корректировал свою конфигурацию, полученный CSS, похоже, не отражает ожидаемые стили, и автопрефиксер, похоже, не работает.
Вот разбивка настроек моего проекта:
Структура проекта:

Код: Выделить всё

/my-project
|-- /src
|   |-- /js
|   |   |-- app.js
|   |-- /styles
|   |   |-- app.scss
|   |-- index.html
|-- package.json
|-- webpack.config.js
|-- postcss.config.js

Зависимости package.json:

Код: Выделить всё

{
"devDependencies": {
"autoprefixer": "^10.4.0",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.4.5",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.0.1",
"cssnano": "^5.0.7",
"sass-loader": "^12.1.0",
"webpack": "^5.59.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.0.0"
}
}

webpack.config.js:

Код: Выделить всё

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const glob = require("glob");

module.exports = (env, argv) => {
const isProduction = argv.mode === "production";

return {
entry: "./src/js/app.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/app.bundle.js",
clean: true,
},
module: {
rules: [
{
test: /\.(s[ac]ss|css)$/i,
use: [
isProduction ? MiniCssExtractPlugin.loader : "style-loader",
"css-loader",
"postcss-loader",
"sass-loader",
],
},
],
},
plugins: [
...glob.sync("./src/**/*.html").map((file) => {
return new HtmlWebpackPlugin({
template: file,
filename: path.basename(file),
});
}),
...(isProduction
? [
new MiniCssExtractPlugin({
filename: "css/[name].css",
}),
]
: []),
],
mode: isProduction ? "production" : "development",
};
};

postcss.config.js:

Код: Выделить всё

module.exports = {
plugins: [
require('postcss-preset-env')({
stage: 1,
}),
require('autoprefixer'),
require('cssnano')({
preset: 'default',
}),
],
};

Файл CSS (app.scss):

Код: Выделить всё

body {
display: flex;
align-items: center;
justify-content: center;
}

Встречавшиеся проблемы:
Полученный файл CSS не содержит никаких префиксов для свойств флексбокса.
В производственном режиме CSS не минимизируется должным образом.
Я подтвердил, что все необходимые пакеты установлены и правильно выполняю команды.
Что я пробовал:
Я убедился, что все зависимости соответствуют требованиям date.
Я упростил конфигурацию Webpack для тестирования.
Я проверил выходные данные как в режиме разработки, так и в рабочем режиме.
Я проверил структуру своих файлов SCSS и JavaScript.
Дополнительная информация:

Код: Выделить всё

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack serve --mode development",
"build": "webpack --mode production"
},

Вопросы:
Что может быть причиной того, что автопрефиксер не работает должным образом в моей настройке Webpack?
Есть ли какие-либо распространенные ошибки при настройке PostCSS с помощью Webpack, которые я мог бы обнаружить пропали без вести?
Будем очень признательны за любую помощь или информацию!

Подробнее здесь: https://stackoverflow.com/questions/790 ... figuration