webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

const isDevelopment = process.env.NODE_ENV !== 'production';

const frontend_entry = path.join('src', 'index.html');

module.exports = {
	target: 'web',
	mode: isDevelopment ? 'development' : 'production',
	entry: {
		// The frontend.entrypoint points to the HTML file for this build, so we need
		// to replace the extension to `.js`.
		index: path.join(__dirname, frontend_entry).replace(/\.html$/, '.tsx')
	},
	devtool: isDevelopment ? 'source-map' : false,
	optimization: {
		minimize: !isDevelopment,
		minimizer: [new TerserPlugin()]
	},
	resolve: {
		plugins: [new TsconfigPathsPlugin()],
		extensions: ['.js', '.ts', '.jsx', '.tsx'],
		fallback: {
			assert: require.resolve('assert/'),
			buffer: require.resolve('buffer/'),
			events: require.resolve('events/'),
			stream: require.resolve('stream-browserify/'),
			util: require.resolve('util/')
		}
	},
	output: {
		filename: 'index.js',
		path: path.join(__dirname, 'dist'),
		publicPath: '/'
	},

	// Depending in the language or framework you are using for
	// front-end development, add module loaders to the default
	// webpack configuration. For example, if you are using React
	// modules and CSS as described in the "Adding a stylesheet"
	// tutorial, uncomment the following lines:
	module: {
		rules: [
			{ test: /\.(ts|tsx|jsx)$/, loader: 'ts-loader' },
			{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
			{ test: /\.(png|jpe?g|gif)$/i, loader: 'file-loader' }
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: path.join(__dirname, frontend_entry),
			cache: false
		}),
		new webpack.EnvironmentPlugin({
			NODE_ENV: 'development'
		}),
		new webpack.ProvidePlugin({
			Buffer: [require.resolve('buffer/'), 'Buffer'],
			process: require.resolve('process/browser')
		}),
		new CopyPlugin({
			patterns: [
				{
					from: `src/.ic-assets.json*`,
					to: '.ic-assets.json5',
					noErrorOnMissing: true
				},
				{
					from: `src/assets/images/cig_logo.png`,
					to: 'logo.png'
				},
				{
					from: `src/assets/images/cig_logo_small.png`,
					to: 'logo_small.png'
				}
			]
		})
	],
	// proxy /api to port 4943 during development.
	// if you edit dfx.json to define a project-specific local network, change the port to match.
	devServer: {
		proxy: {
			'/api': {
				target: 'http://127.0.0.1:4943',
				changeOrigin: true,
				pathRewrite: {
					'^/api': '/api'
				}
			}
		},
		static: path.resolve(__dirname, 'assets'),
		hot: true,
		watchFiles: [path.resolve(__dirname, 'src')],
		liveReload: true,
		historyApiFallback: true
	}
};