Не удается минимизировать CSS с помощью веб-пакета

Question

Я бы хотел уменьшить свой css-файл для производства, и я использую webpack 3 со следующей конфигурацией:

var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');


module.exports = {
    entry: [
        "./src/index.tsx", "./src/assets/css/styles.css"
    ],

    output: {
        filename: "bundle.js",
        publicPath: "/",
        path: path.resolve(__dirname, "dist")
    },

    // Enable sourcemaps for debugging webpack's output.
    // devtool: "cheap-module-source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new ExtractTextPlugin({
            filename:  (getPath) => {
              return getPath('assets/css/styles.css').replace('css/js', 'css');
            },
            allChunks: true
          }),
        new OptimizeCssAssetsPlugin({
          assetNameRegExp: /\.styles\.css$/g,
          cssProcessor: require('cssnano'),
          cssProcessorPluginOptions: {
            preset: ['default', { discardComments: { removeAll: true } }],
          },
          canPrint: true
        })
    ],

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, use: ["awesome-typescript-loader"] },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, enforce: "pre", use: "source-map-loader" },
            {
                test: /\.css$/,
                use: [
                        'style-loader',
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        { loader: 'postcss-loader', options: {} }
                      ]
              }
        ],

        loaders: [ {
            test: /\.js|.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
        }, {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loaders: [
                'file?hash=sha512&digest=hex&name=[hash].[ext]',
                'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
            ]
        } ]
    }
};

Ошибка:

Сборка модуля не удалась: ошибка: не удалось загрузить плагин PostCSS: не удалось найти модуль 'postcss-plugin'

У меня также есть этот postcssrc.js в корне проекта:

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {},
    'cssnano': {}
  }
}

Меня все смущает, если я использую больше, чем достаточно плагинов только для минимизации css, кто-нибудь знает, в чем здесь проблема, или может подсказать, что мне нужно или изменить здесь?