-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
111 lines (108 loc) · 2.96 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
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const environments = require("./environments");
const MODE = {
DEV: "development",
PROD: "production",
};
module.exports = (env, options) => {
const { mode = MODE.DEV } = options;
const { server = "local" } = env;
return {
mode,
devServer: {
static: { directory: path.join(__dirname, "./build/") },
client: { overlay: true },
host: "0.0.0.0",
port: "3000",
proxy: {
"/api": { target: environments[server], secure: false },
"**": {
bypass(req) {
if (req.headers.accept.includes("html")) {
return "/index.html";
}
},
},
},
hot: true,
https: server !== "local",
headers: {
"Access-Control-Allow-Origin": "*",
},
historyApiFallback: true,
},
resolve: { extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".scss"] },
entry: {
polyfill: ["core-js/stable", "regenerator-runtime/runtime"],
application: "./index.tsx",
},
module: {
rules: [
{
loader: "babel-loader",
exclude: /node_modules/,
test: /\.(tsx|ts)?$/,
},
{
test: /\.(scss|css)?$/,
use: [
mode === MODE.DEV ? "style-loader" : MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
localIdentName: "[name]__[local]__[hash:base64:5]",
exportLocalsConvention: "camelCaseOnly",
},
},
},
"sass-loader",
],
},
],
},
output: {
path: path.join(__dirname, "./build/"),
filename: "js/[name].[contenthash].js",
publicPath: "/",
},
optimization: {
splitChunks: {
automaticNameDelimiter: ".",
cacheGroups: {
modules: {
name: "modules",
test: /[\\/]node_modules[\\/]/,
chunks(chunk) {
return chunk.name === "application";
},
maxSize: 128000,
},
},
},
},
plugins: [
new CleanWebpackPlugin({ verbose: true }),
new HTMLWebpackPlugin({
title: "React Application",
filename: "index.html",
template: "public/index.html",
favicon: "public/favicon.ico",
chunks: ["polyfill", "modules", "application"],
hash: true,
xhtml: true,
inject: true,
}),
new CopyPlugin({ patterns: [{ from: "*.png", context: "public" }] }),
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "css/[id].css",
}),
],
};
};