Как минимизировать стили CSS с помощью веб-пакета 3

Question

Я хочу минимизировать / оптимизировать мой CSS для производства, но по какой-то причине он показывает ошибку в моей текущей реализации. Мой webpack 3 config.production.js выглядит так:

var webpack = require("webpack");
var path = require("path");
const ExtractTextPlugin = require("extract-text-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("styles.css"),
    ],

    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: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }
        ],
        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'
            ]
        } ]
    }
};

ОШИБКА в мульти ./src/index.tsx ./src/assets/css/styles.css Модуль не найден: Ошибка: не удается разрешить загрузчик стилей в C: \ Users \ iluli \ Documents \ socfinder_search \ frontend @ multi ./src/index.tsx ./src/assets/css/styles.css нпм ERR! код ELIFECYCLE нпм ERR! Errno 2 нпм ERR! socfinder-search@1.0.0 build: webpack --config webpack.prod.config.js -p нпм ERR! Статус выхода 2 нпм ERR! нпм ERR! Не удалось выполнить скрипт сборки socfinder-search@1.0.0. нпм ERR! Это, вероятно, не проблема с npm. Скорее всего, выше вывод журнала.

Я не вижу свой файл css в папке сборки.

ОБНОВЛЕНИЕ: После установки css-loader теперь styles.css генерируется в build, но нет никакой разницы между build css и dev css. Я хотел бы, чтобы у производства была минимизированная версия css, для ex всех css в одной строке.

Answer 1

Попробуйте добавить опции «свернуть» в css-loader:

{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader", options: { minimize: true} }) }

взять от здесь

Answer 2

Добавьте загрузчик стилей в список зависимостей:

npm install style-loader --save-dev