aboutsummaryrefslogtreecommitdiffstats
path: root/config/webpack/webpack.common.js
blob: 5396cb433087cf9e690eade29f85b8988acb0aab (plain)
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { DefinePlugin } = require('webpack');
const dotenv = require('dotenv').config();
const paths = require('./paths');

module.exports = {
  entry: {
    style: {
      import: paths.src.style,
      filename: 'js/style.js',
    },
    scripts: {
      import: paths.src.scripts,
      filename: 'js/app.js',
    },
  },
  output: {
    path: paths.dist,
    clean: true,
    hotUpdateChunkFilename: 'hmr/[id].[fullhash].hot-update.js',
    hotUpdateMainFilename: 'hmr/[runtime].[fullhash].hot-update.json',
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: (img) => {
            const relativePath = img.filename;
            const filteredPath = relativePath.replace('src/', '');
            return filteredPath;
          },
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: (font) => {
            const relativePath = font.filename;
            const filteredPath = relativePath.replace('src/', '');
            return filteredPath;
          },
        },
      },
    ],
  },
  optimization: {
    runtimeChunk: {
      name: 'js/runtime',
    },
    splitChunks: {
      cacheGroups: {
        style: {
          type: 'css/mini-extract',
          name: '/css/style',
          chunks: (chunk) => chunk.name === 'style',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,
        options: {
          plugins: [
            ['gifsicle', { interlaced: true }],
            ['mozjpeg', { progressive: true, quality: 75 }],
            ['optipng', { optimizationLevel: 5 }],
            // Svgo configuration here https://github.com/svg/svgo#configuration
            [
              'svgo',
              {
                plugins: [
                  {
                    name: 'preset-default',
                    params: {
                      overrides: {
                        removeTitle: false,
                        removeViewBox: false,
                      },
                    },
                  },
                  'removeDimensions',
                ],
              },
            ],
          ],
        },
      },
    }),
    new CopyPlugin({
      patterns: [
        { from: paths.src.fonts, to: 'fonts', noErrorOnMissing: true },
        { from: paths.src.images, to: 'images', noErrorOnMissing: true },
      ],
    }),
    new DefinePlugin({
      'process.env': JSON.stringify(dotenv.parsed),
      'process.env.ACKEE_DOMAIN': JSON.stringify(process.env.ACKEE_DOMAIN),
      'process.env.ACKEE_SITE_ID': JSON.stringify(process.env.ACKEE_SITE_ID),
    }),
  ],
  resolve: {
    fallback: {
      fs: false,
      path: false,
      os: false,
    },
  },
};