webpack.config.js

/** @format */

const webpack = require('webpack');
const dotenv = require('dotenv');

const config = require('sapper/config/webpack.js');
const pkg = require('./package.json');

dotenv.config();
const { NODE_ENV, ROLLBAR_CLIENT_ACCESS_TOKEN } = process.env;

const mode = NODE_ENV;
const dev = mode === 'development';

module.exports = {
	client: {
		entry: config.client.entry(),
		output: config.client.output(),
		resolve: {
			extensions: ['.js', '.json', '.html'],
			mainFields: ['svelte', 'module', 'browser', 'main']
		},
		module: {
			rules: [
				{
					test: /\.js$/,
					use: {
						loader: 'babel-loader',
						options: {
							envName: 'client'
						}
					}
				},
				{
					test: /\.html$/,
					use: [
						{
							loader: 'babel-loader',
							options: {
								envName: 'client'
							}
						},
						{
							loader: 'svelte-loader',
							options: {
								dev,
								hydratable: true,
								hotReload: true,
								emitCss: true,
								legacy: true
							}
						}
					]
				},
				{
					test: /\.css$/,
					use: [
						'style-loader',
						'css-loader'
					].filter(Boolean)
				},
				{
					test: /\.(eot|svg|ttf|woff|woff2)$/,
					use: {
						loader: 'file-loader',
						options: {
							name: 'assets/[path][name].[ext]',
							context: './node_modules'
						}
					}
				}
			]
		},
		mode,
		plugins: [
			dev && new webpack.HotModuleReplacementPlugin(),
			new webpack.DefinePlugin({
				'process.env.BROWSER': JSON.stringify(true),
				'process.env.NODE_ENV': JSON.stringify(mode),
				'process.env.ROLLBAR_ACCESS_TOKEN': JSON.stringify(
					ROLLBAR_CLIENT_ACCESS_TOKEN
				)
			}),
			new webpack.ProvidePlugin({
				URL: ['whatwg-url', 'URL'],
				URLSearchParams: ['whatwg-url', 'URLSearchParams']
			})
		].filter(Boolean),
		devtool: dev && 'inline-source-map'
	},
	server: {
		entry: config.server.entry(),
		output: config.server.output(),
		target: 'node',
		resolve: {
			extensions: ['.js', '.json', '.html'],
			mainFields: ['svelte', 'module', 'browser', 'main']
		},
		externals: Object.keys(pkg.dependencies),
		module: {
			rules: [
				{
					test: /\.js$/,
					use: {
						loader: 'babel-loader',
						options: {
							envName: 'server'
						}
					}
				},
				{
					test: /\.html$/,
					use: [
						{
							loader: 'babel-loader',
							options: {
								envName: 'server'
							}
						},
						{
							loader: 'svelte-loader',
							options: {
								css: false,
								generate: 'ssr',
								dev
							}
						}
					]
				},
				{
					test: /typeface/,
					use: 'ignore-loader'
				},
				{
					test: /\.(css|eot|svg|ttf|woff|woff2)$/,
					use: 'ignore-loader'
				}
			]
		},
		plugins: [
			new webpack.ProvidePlugin({
				URLSearchParams: ['whatwg-url', 'URLSearchParams']
			})
		],
		mode: process.env.NODE_ENV,
		performance: {
			hints: false // it doesn't matter if server.js is large
		}
	},
	serviceworker: {
		entry: config.serviceworker.entry(),
		output: config.serviceworker.output(),
		mode: process.env.NODE_ENV
	}
};