-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
105 lines (98 loc) · 2.91 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
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (_env, options) => {
if (options.mode == null) {
console.warn("WARNING: No mode was set. Will default to `development`");
}
const NODE_ENV = options.mode || "development";
const configPath = path.resolve(__dirname, `./config/${NODE_ENV}.json`);
const config = require(configPath);
const {
private: { HOST, PORT },
...publicVars
} = config;
const defineVars = Object.entries(publicVars).reduce((acc, [key, value]) => {
acc[key] = JSON.stringify(value);
return acc;
}, {});
console.log("NODE_ENV: ", NODE_ENV);
console.log("APP_CONFIG: ", defineVars);
return {
entry: "./src/index.tsx",
output: {
filename: "index.[contenthash].js",
path: path.resolve(__dirname, "./public"),
publicPath: "/",
},
plugins: [
// Check `config/development.json` to see what vars get passed to `window`.
// Everything except for the `private` key is included.
new webpack.DefinePlugin({ "process.env": defineVars }),
new webpack.ProgressPlugin(),
new MiniCssExtractPlugin({
filename: "[name].[hash].css",
chunkFilename: "[id].[hash].css",
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ title: config.PAGE_TITLE, template: "./src/index.html" }),
],
resolve: {
extensions: [".tsx", ".ts", ".js", ".json"],
},
module: {
rules: [
{
test: /\.[jt]sx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /(\.mod)?\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[name]__[local]--[hash:base64:5]",
},
},
},
"postcss-loader",
],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {
outputPath: "./images/",
publicPath: "/images/",
name: (_file) => {
if (NODE_ENV === "development") {
return "[name].[ext]";
}
return "[contenthash].[ext]";
},
},
},
],
},
],
},
stats: { children: false },
devServer: {
contentBase: path.join(__dirname, "public"),
compress: true,
host: HOST, // Probably localhost in development
port: PORT, // Probably 8080 in development
historyApiFallback: true,
},
};
};