/** * 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'; const { version } = require('../../package.json'); checkNodeEnv('production'); deleteSourceMaps(); const devtoolsConfig = process.env.DEBUG_PROD === 'true' ? { devtool: 'source-map', } : {}; const configuration: webpack.Configuration = { ...devtoolsConfig, mode: 'production', target: ['web'], entry: { remote: path.join(webpackPaths.srcRemotePath, 'index.tsx'), worker: path.join(webpackPaths.srcRemotePath, 'service-worker.ts'), }, output: { path: webpackPaths.distRemotePath, publicPath: './', filename: '[name].js', library: { type: 'umd', }, }, module: { rules: [ { test: /\.s?(a|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { modules: true, 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: 'remote.css', }), new BundleAnalyzerPlugin({ analyzerMode: process.env.ANALYZE === 'true' ? 'server' : 'disabled', }), new HtmlWebpackPlugin({ filename: 'index.html', template: path.join(webpackPaths.srcRemotePath, 'index.ejs'), favicon: path.join(webpackPaths.assetsPath, 'icons', 'favicon.ico'), minify: { collapseWhitespace: true, removeAttributeQuotes: true, removeComments: true, }, isBrowser: true, env: process.env.NODE_ENV, isDevelopment: process.env.NODE_ENV !== 'production', templateParameters: { version, prod: true, }, }), ], }; export default merge(baseConfig, configuration);