112 lines
4.0 KiB
JavaScript
112 lines
4.0 KiB
JavaScript
import path from 'path'
|
|
import dotenv from 'dotenv'
|
|
dotenv.config({
|
|
path: `.env.${process.env.NODE_ENV}`,
|
|
});
|
|
|
|
|
|
import antdThemeOverrides from '../src/AntdTheme'
|
|
import { getThemeVariables } from 'antd/dist/theme'
|
|
|
|
export default ({ config }) => {
|
|
// Transpile Gatsby module because Gatsby includes un-transpiled ES6 code.
|
|
// ========================================================
|
|
config.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/];
|
|
|
|
// Add Babel rules
|
|
// ========================================================
|
|
// use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
|
|
config.module.rules[0].use[0].loader = require.resolve('babel-loader');
|
|
|
|
// use @babel/preset-react for JSX and env (instead of staged presets)
|
|
config.module.rules[0].use[0].options.presets = [
|
|
require.resolve('@babel/preset-react'),
|
|
require.resolve('@babel/preset-env'),
|
|
// Emotion preset must run BEFORE reacts preset to properly convert css-prop.
|
|
// Babel preset-ordering runs reversed (from last to first). Emotion has to be after React preset.
|
|
];
|
|
|
|
config.module.rules[0].use[0].options.plugins = [
|
|
// use @babel/plugin-proposal-class-properties for class arrow functions
|
|
require.resolve('@babel/plugin-proposal-class-properties'),
|
|
// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
|
|
require.resolve('babel-plugin-remove-graphql-queries'),
|
|
];
|
|
|
|
// Prefer Gatsby ES6 entrypoint (module) over commonjs (main) entrypoint
|
|
// ========================================================
|
|
config.resolve.mainFields = ['browser', 'module', 'main'];
|
|
|
|
// Add Webpack rules for TypeScript
|
|
// ========================================================
|
|
config.module.rules.push({
|
|
test: /\.(ts|tsx)$/,
|
|
loader: require.resolve('babel-loader'),
|
|
options: {
|
|
presets: [
|
|
['react-app', { flow: false, typescript: true }],
|
|
// Emotion preset must run BEFORE reacts preset to properly convert css-prop.
|
|
// Babel preset-ordering runs reversed (from last to first). Emotion has to be after React preset.
|
|
],
|
|
plugins: [
|
|
require.resolve('@babel/plugin-proposal-class-properties'),
|
|
// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
|
|
require.resolve('babel-plugin-remove-graphql-queries'),
|
|
['import', {libraryName: "antd", libraryDirectory: 'es', style: true}]
|
|
],
|
|
},
|
|
});
|
|
config.module.rules.push({
|
|
test: /\.less$/,
|
|
loaders: [
|
|
"style-loader",
|
|
"css-loader",
|
|
{
|
|
loader: "less-loader",
|
|
options: {
|
|
lessOptions: {
|
|
javascriptEnabled: true,
|
|
modifyVars: {
|
|
...getThemeVariables({
|
|
dark: true, // Enable dark mode
|
|
compact: true, // Enable compact mode,
|
|
}),
|
|
...antdThemeOverrides,
|
|
}
|
|
}
|
|
}
|
|
}
|
|
],
|
|
include: path.resolve(__dirname, "../")
|
|
})
|
|
|
|
config.resolve.extensions.push('.ts', '.tsx');
|
|
|
|
// Add SVGR Loader
|
|
// ========================================================
|
|
// Remove svg rules from existing webpack rule
|
|
const assetRule = config.module.rules.find(({ test }) => test.test('.svg'));
|
|
|
|
const assetLoader = {
|
|
loader: assetRule.loader,
|
|
options: assetRule.options || assetRule.query,
|
|
};
|
|
|
|
config.module.rules.unshift({
|
|
test: /\.svg$/,
|
|
use: ['@svgr/webpack', assetLoader],
|
|
});
|
|
|
|
// Mirror project aliases for some reason (should be picked up by .babelrc)
|
|
// ========================================================
|
|
config.resolve.alias['~/utils'] = path.resolve(__dirname, '../src/utils');
|
|
config.resolve.alias['~/components'] = path.resolve(
|
|
__dirname,
|
|
'../src/components'
|
|
);
|
|
config.resolve.alias['~/images'] = path.resolve(__dirname, '../src/images');
|
|
config.resolve.alias['~/icons'] = path.resolve(__dirname, '../src/icons');
|
|
|
|
return config;
|
|
};
|