/** * Build config for electron renderer process */ import path from 'path'; import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'; import HtmlWebpackPlugin from 'html-webpack-plugin'; import MiniCssExtractPlugin from 'mini-css-extract-plugin'; import TerserPlugin from 'terser-webpack-plugin'; import webpack from 'webpack'; import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import { merge } from 'webpack-merge'; import checkNodeEnv from '../scripts/check-node-env'; import deleteSourceMaps from '../scripts/delete-source-maps'; import baseConfig from './webpack.config.base'; import webpackPaths from './webpack.paths'; checkNodeEnv('production'); deleteSourceMaps(); const devtoolsConfig = process.env.DEBUG_PROD === 'true' ? { devtool: 'source-map', } : {}; const configuration: webpack.Configuration = { ...devtoolsConfig, mode: 'production', target: ['web', 'electron-renderer'], entry: [path.join(webpackPaths.srcRendererPath, 'index.tsx')], output: { path: webpackPaths.distRendererPath, publicPath: './', filename: 'renderer.js', library: { type: 'umd', }, }, module: { rules: [ { test: /\.s?(a|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { modules: { localIdentName: '[name]__[local]--[hash:base64:5]', exportLocalsConvention: 'camelCaseOnly', }, sourceMap: true, importLoaders: 1, }, }, 'sass-loader', ], include: /\.module\.s?(c|a)ss$/, }, { test: /\.s?(a|c)ss$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], exclude: /\.module\.s?(c|a)ss$/, }, // Fonts { test: /\.(woff|woff2|eot|ttf|otf)$/i, type: 'asset/resource', }, // Images { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, ], }, optimization: { minimize: true, minimizer: [ new TerserPlugin({ parallel: true, }), new CssMinimizerPlugin(), ], }, plugins: [ /** * Create global constants which can be configured at compile time. * * Useful for allowing different behaviour between development builds and * release builds * * NODE_ENV should be production so that modules do not perform certain * development checks */ new webpack.EnvironmentPlugin({ NODE_ENV: 'production', DEBUG_PROD: false, }), new MiniCssExtractPlugin({ filename: 'style.css', }), new BundleAnalyzerPlugin({ analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled', }), new HtmlWebpackPlugin({ filename: 'index.html', template: path.join(webpackPaths.srcRendererPath, 'index.ejs'), minify: { collapseWhitespace: true, removeAttributeQuotes: true, removeComments: true, }, isBrowser: false, isDevelopment: process.env.NODE_ENV !== 'production', templateParameters: { web: false, }, }), ], }; export default merge(baseConfig, configuration);