-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.common.ts
106 lines (91 loc) · 2.82 KB
/
webpack.common.ts
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
import path from 'path';
import HTMLWebpackPlugin from 'html-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import DotenvWebpackPlugin from 'dotenv-webpack';
import { Configuration, DefinePlugin } from 'webpack';
import { getEnvironmentVariables, PATHS } from './utils';
const commonConfig: Configuration = {
/**
* The module webpack begins with to build the dependency graph
*/
entry: path.join(PATHS.src, 'index.tsx'),
/**
* Where webpack emits the bundles it creates and how to name them
*/
output: {
path: PATHS.build,
filename: '[name].bundle.js',
publicPath: '/',
clean: true, // clean the dist folder before build
},
/**
* Allow webpack to process other file types and convert them into valid modules
*/
module: {
rules: [
// JavaScript: use babel-loader to transpile JavaScript files
{
test: /\.jsx?$/,
use: ['babel-loader', 'source-map-loader'],
exclude: /node_modules/,
},
// Typescript: use babel-loader to transpile Typescript files
{
test: /\.tsx?$/,
use: ['babel-loader'],
exclude: /node_modules/,
},
/**
* Configure asset loading
* Read https://webpack.js.org/guides/asset-modules/ for more info
*/
// Images: copy images to the build folder
{ test: /\.(?:ico|gif|png|jpe?g)$/i, type: 'asset/resource' },
// SVGs and Fonts: load them as inline files
{ test: /\.(?:svg|ttf|eot|woff2?)$/i, type: 'asset/inline' },
],
},
/**
* Customize/Enhance the webpack build process
*/
plugins: [
/**
* generate HTML file from template
*/
new HTMLWebpackPlugin({
title: 'Typescript Webpack boilerplate',
template: path.join(PATHS.public, 'template.html'),
favicon: path.join(PATHS.src, 'assets/favicon.ico'),
filename: 'index.html',
}),
/**
* Copy files from the public/assets folder to the 'build/assets' folder
**/
new CopyWebpackPlugin({
patterns: [
{
from: path.join(PATHS.public, 'assets'),
to: 'assets',
globOptions: { gitignore: true },
noErrorOnMissing: true,
},
],
}),
// Speed up Typescript type checking and ESLint validation by moving it to a separate process
new ForkTsCheckerWebpackPlugin(),
// Load environment variables from .env files
new DotenvWebpackPlugin(),
/**
* Replace variables in the code with other values at compile time
*/
new DefinePlugin({ ...getEnvironmentVariables() }),
],
resolve: {
/**
* TODO: maybe add alias configuration to enable absolute imports
*/
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
},
};
export default commonConfig;