generated from coding-for-llamas/cfl-front
-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
141 lines (129 loc) · 4.61 KB
/
webpack.config.js
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
require('dotenv').config();
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const { ProvidePlugin } = require('webpack');
const webpack = require('webpack');
// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || []; // eslint-disable-line no-mixed-operators
const when = (condition, config, negativeConfig) => (condition ? ensureArray(config) : ensureArray(negativeConfig));
// primary config:
const nodeEnv = process.env.NODE_ENV || 'development';
const title = 'Caring Child Daycare';
const outDir = path.resolve(__dirname, 'dist');
const srcDir = path.resolve(__dirname, 'src');
const baseUrl = '/daycare';
const envVars = ['NODE_ENV', 'BackendUrl', 'GoogleClientId', 'userRoles', 'HashString'];
if (nodeEnv === 'development')envVars.push('PORT');
module.exports = (env) => ({
resolve: {
alias:{ src: srcDir },
extensions: ['.js', '.jsx', '.ts', '.tsx'],
fallback: { // needed for jsonwebtoken
crypto: require.resolve('crypto-browserify'),
stream: require.resolve('stream-browserify'),
util: require.resolve('util/'),
},
},
entry: {
app: [`${srcDir}/main.tsx`],
},
mode: env.production ? 'production' : 'development',
output: {
path: outDir,
publicPath: baseUrl,
filename: env.production ? '[name].[chunkhash].bundle.js' : '[name].[fullhash].bundle.js',
chunkFilename: env.production ? '[name].[chunkhash].chunk.js' : '[name].[fullhash].chunk.js',
},
performance: { hints: false },
devServer: {
static: outDir,
hot: true,
historyApiFallback: { // serve index.html for all 404 (required for push-state)
rewrites: [
{ from: /^\/$/, to: '/daycare' },
{ from: /^\//, to: '/daycare' },
{ from: /./, to: '/daycare' },
],
},
port: parseInt(process.env.PORT, 10) || 8888,
},
devtool: env.production ? 'nosources-source-map' : 'source-map',
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles', test: /\.css$/i, chunks: 'all', enforce: true,
},
},
},
},
module: {
rules: [
{
test: /\.(t|j)sx?$/,
use: { loader: 'ts-loader' },
exclude: [/node_modules/],
},
{
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader',
},
// SCSS required in JS/TS files should use the style-loader that auto-injects it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
{
test: /\.s[ac]ss$/i,
use: [
process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
{
loader: "css-loader", // translates CSS into CommonJS
options: {
sourceMap: true,
},
},
{
loader: "sass-loader", // compiles Sass to CSS, using dart sass
options: {
sourceMap: true,
},
},
],
},
// Still needed for some node modules that use CSS
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{ test: /\.html$/i, loader: 'html-loader' }, // eslint-disable-next-line no-useless-escape
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
],
},
plugins: [
new ProvidePlugin({
process: 'process/browser',
}),
new HtmlWebpackPlugin({
template: `${srcDir}/index.ejs`,
minify: env.production ? { removeComments: true, collapseWhitespace: true } : undefined,
metadata: { title, baseUrl },
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
new CopyPlugin({
patterns: [
{ from: 'static/favicon.ico', to: 'favicon.ico' },
],
}),
new webpack.EnvironmentPlugin(envVars),
...when(env.analyze, new BundleAnalyzerPlugin()),
],
});