Как использовать плагин postcss-loader и auto-prefixer в webpack

Поскольку extract-text-webpack-plugin устарел, нам нужно использовать mini-css-extract-plugin для настройки веб-пакета. Итак, есть небольшие изменения в webpack.config.js.

Я думаю, что новая версия намного проще в том смысле, что плагин работает как объект в массиве (как загрузчик). Вы можете вызвать его с помощью «plugin.loader» и просто поместить его поверх заказа. (Порядок веб-пакета снизу вверх.)

Напротив, старая версия «extract-text-webpack-plugin» сама вызывает функцию «extract» для разрешения загрузчиков, поэтому она принимает массив объектов в качестве аргумента.

Во-вторых, у «postcss-loader» в новой версии есть «postcssOptions», которые ранее не нужны. Вам нужно поместить плагины в «postcssOptions».

Наконец, недопустимые параметры Mini CSS Extract Plugin должны быть объектными. Должен быть

плагины: [новый MiniCssExtractPlugin({имя файла: «styles.css»})]

вместо

плагины: [новый MiniCssExtractPlugin (имя файла: «styles.css»)]

Вы можете сами сравнить приведенные выше примеры кодов. Если есть что-то, чем вы хотите поделиться, пожалуйста, оставьте комментарий. Спасибо за чтение.