webpack.prod.js

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

function webpackProductionConfigBuilder(options) {
    options = options || {};
    const extractMainCSS = new ExtractTextPlugin(options.extractMainCSS || '[name].[hash].css'); //This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. ()
    const extractIconsCSS = new ExtractTextPlugin(options.extractIconsCSS || '[name]-icons.[hash].css');
    const extractOptions = Object.assign({
        fallback: require.resolve('style-loader'),
        use: [require.resolve('css-loader'), require.resolve('postcss-loader')]
    }, options.extractOptions);

    return {
        module: {
            rules: [
                {
                    test: /\.css$/,
                    exclude: /icon.*\.css$/,
                    use: extractMainCSS.extract(extractOptions)
                },
                {
                    test: /icon.*\.css$/,
                    use: extractIconsCSS.extract(extractOptions)
                }
            ]
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                minChunks(module) {
                    return module.userRequest
                        && (module.userRequest.indexOf('arui') === -1 || module.userRequest.indexOf('polyfills') !== -1)
                        && module.userRequest.indexOf('node_modules') !== -1;
                }
            }), //выделяет общие части нескольких точек входа в отдельную сборку) — заменен на набор API `optimize.splitChunks`
            new ManifestPlugin(), //Webpack plugin for generating an asset manifest. holds all the entries and filenames
            new webpack.optimize.ModuleConcatenationPlugin(), //enable the common scope concatenation behavior in webpack
            new webpack.optimize.UglifyJsPlugin({
                beautify: false,
                sourceMap: false,
                warnings: false
            }), //минификатор 
            extractMainCSS,
            extractIconsCSS,
            new OptimizeCssAssetsPlugin(), //search for CSS assets during the Webpack build and will optimize \ minimize the CSS (by default it uses cssnano but a custom CSS processor can be specified)
            new CompressionPlugin({
                asset: '[file].gz',
                algorithm: 'gzip',
                regExp: /\.js$|\.css$|\.png$|\.svg$/,
                threshold: 10240,
                minRatio: 0.8
            }) //сжимает
        ]
    };
}

module.exports = webpackProductionConfigBuilder;