-
Notifications
You must be signed in to change notification settings - Fork 1
/
craco.config.js
125 lines (111 loc) · 3.39 KB
/
craco.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
// Based on the Ant Design documentation:
// https://ant.design/docs/react/use-with-create-react-app#Advanced-Guides
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
const modifyVars = require("./src/style/ant-theme");
const { when } = require("@craco/craco");
module.exports = {
babel: {
plugins: [
"lodash",
// Only add these imports when not running tests,
...when(process.env.NODE_ENV !== "test", () => [[
"import",
{ libraryName: "antd", libraryDirectory: "es", style: true }
]], [])
]
},
jest: {
configure: (jestConfig, { env, paths, resolve, rootDir }) => {
jestConfig.moduleNameMapper['^.+\\.module\\.(css|sass|scss|less)$'] = 'identity-obj-proxy';
jestConfig.moduleNameMapper["@(store|style|pages|components|utils|translations|assets|api)(|.*)$"] = "<rootDir>/src/$1/$2";
jestConfig.moduleNameMapper["__tests__(|.*)$"] = "<rootDir>/src/__tests__/$1";
jestConfig.testPathIgnorePatterns = ["node_modules", "src/__tests__/helpers/"]
return jestConfig;
}
},
plugins: [
{
plugin: {
overrideWebpackConfig: ({ webpackConfig }) => {
// Tree shaking for lodash
// webpackConfig.resolve.plugins.push(new LodashModuleReplacementPlugin({
// collections: true,
// paths: true,
// memoizing: true,
// flattening: true
// }));
// Add custom paths resolver for typescript
webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}))
const gitHubIssueUrl = (repo, query) =>
`https://github.com/${repo}/issues${
query ? `?q=is%3Aissue+${query}` : ""
}`;
const throwInvalidConfigError = ({
message,
gitHubIssueQuery: query
}) => {
throw new Error(
`${message}\n\n` +
"Did you update create-react-app or craco recently? \n" +
"Please take a look at some recent issues in craco and " +
"create-react-app to see if someone has found a solution: \n\n" +
`* ${gitHubIssueUrl(
"sharegate/craco",
query
)}\n` +
`* ${gitHubIssueUrl(
"facebook/create-react-app",
query
)}\n`
);
};
const lessExtension = /\.less$/;
const { getLoader, loaderByName } = require("@craco/craco");
const { isFound, match: fileLoaderMatch } = getLoader(
webpackConfig,
loaderByName("file-loader")
);
if (!isFound) {
throwInvalidConfigError({
message:
"Can't find file-loader in the webpack config!",
gitHubIssueQuery: "webpack+file-loader"
});
}
fileLoaderMatch.loader.exclude.push(lessExtension);
const lessRule = {
test: lessExtension,
use: [
{
loader: require.resolve("style-loader")
},
{
loader: require.resolve("css-loader")
},
{
loader: require.resolve("less-loader"),
options: {
modifyVars,
javascriptEnabled: true
}
}
]
};
const oneOfRule = webpackConfig.module.rules.find(
rule => typeof rule.oneOf !== "undefined"
);
if (!oneOfRule) {
throwInvalidConfigError({
message:
"Can't find a 'oneOf' rule under module.rules in the webpack config!",
gitHubIssueQuery: "webpack+rules+oneOf"
});
}
oneOfRule.oneOf.push(lessRule);
return webpackConfig;
}
}
}
]
};