abvcss-website/webpack.prod.js at master · abvcss/abvcss-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const postcssPresetEnv = require('postcss-preset-env');
const imageminMozjpeg = require('imagemin-mozjpeg');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WebpackCriticalCSSInliner = require('webpack-critical-css-inliner');
const path = require('path');

module.exports = merge(common, {
    mode: 'production',

    module: {
        rules: [{
            test: /\.(sass|scss)$/,
            use: [
                {
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '/dist'
                    }
                },
                {
                    loader: 'css-loader', options: {
                        importLoaders: 1
                    }
                },
                {
                    loader: 'postcss-loader', options: {
                        postcssOptions: {
                            plugins: [
                                postcssPresetEnv({
                                    stage: 3,
                                    browsers: '> 1%',
                                    autoprefixer: { grid: true }
                                }),
                                require('rucksack-css'),
                                require('cssnano'),
                                require('css-mqpacker')
                            ]
                        }
                    }
                },
                'sass-loader'
            ]
        },
        {
            test: /\.(png|jpg|gif)$/i,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192
                }
              }
            ]
        },
        {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: '../fonts/'
                }
              }
            ]
        }]
    },

    // Learn https://web.dev/fast/use-imagemin-to-compress-images
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                { from: 'img/**/**', to: path.resolve(__dirname, 'dist') }
            ]
        }),
        new ImageminPlugin({
            pngquant: ({quality: '95'}),
            plugins: [imageminMozjpeg({quality: '90'})]
        }),
        new WebpackCriticalCSSInliner({
            base: './',
            src: 'index-intermediate.html',
            target: 'index.html',
            inlineGoogleFonts: true,
            minify: true,
            ignoreStylesheets: [/bootstrap/],
            whitelist: /#foo|\.bar/
        })
    ]
});