/
webpack.config.js
135 lines (127 loc) · 3.38 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
const path = require("path");
const WebpackBar = require("webpackbar");
module.exports = {
mode: "development",
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
library: "adminUI",
libraryTarget: "umd",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
modules: [
'node_modules',
path.join(__dirname, 'src/fonts'),
],
extensions: [".ts", ".tsx", ".js", ".jsx", ".less"],
alias: {
src: path.resolve(__dirname, "src"),
},
},
module: {
rules: [
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: "url-loader",
options: {
limit: true,
}
},
},
// Styles in current project use SCSS preprocessing language with CSS modules.
// They have to follow file naming convention: [filename].module.scss
{
test: /\.module\.scss$/,
exclude: /node_modules/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: {
localIdentName: "[local]--[hash:base64:5]",
}
},
},
"sass-loader"
],
},
// Ant design styles defined as global styles with .scss files which don't follow
// internal convention to have .module.scss extension. That's why we need one more sass
// loader which matches SCSS files without .module suffix. Note, it doesn't exclude node_modules
// dir so it can access external dependencies.
{
test: /(?<!\.module)\.scss/,
use: ["style-loader", "css-loader", "sass-loader"],
},
{
test: /\.(ts|js)x?$/,
use: [
"babel-loader",
{
loader: "astroturf/loader",
options: { extension: ".module.scss" },
},
],
exclude: /node_modules/,
},
// Preprocess LESS styles required by external components
// (react-select)
{
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true
}
}
},
],
test: /\.less$/,
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader",
},
],
},
plugins: [
new WebpackBar({
name: "admin-ui",
color: "cyan",
profile: true,
}),
],
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
protobufjs: "protobufjs",
react: {
commonjs: "react",
commonjs2: "react",
amd: "react",
root: "React",
},
"react-dom": {
commonjs: "react-dom",
commonjs2: "react-dom",
amd: "react-dom",
root: "ReactDom",
},
"react-router-dom": "react-router-dom",
"react-redux": "react-redux",
"redux-saga": "redux-saga",
"redux": "redux",
},
};