2020-10-16 12:38:04 +00:00
|
|
|
const path = require("path");
|
2019-11-12 11:55:22 +00:00
|
|
|
|
|
|
|
const sourceFolders = [
|
|
|
|
path.resolve(__dirname),
|
2020-10-16 12:38:04 +00:00
|
|
|
path.resolve(__dirname, "../src"),
|
2019-11-12 11:55:22 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
module.exports = ({ config }) => {
|
2020-10-16 12:38:04 +00:00
|
|
|
if (process.env.NODE_ENV === "production") {
|
2019-11-12 11:55:22 +00:00
|
|
|
// remove progress plugin
|
|
|
|
// progress plugin outputs a lot of console logs, which makes
|
|
|
|
// netlify build realllllllllllllllly slow.
|
|
|
|
config.plugins = config.plugins.filter(
|
2020-10-16 12:38:04 +00:00
|
|
|
(plugin) => plugin.constructor.name !== "ProgressPlugin"
|
2019-11-12 11:55:22 +00:00
|
|
|
);
|
2020-10-16 12:38:04 +00:00
|
|
|
config.devtool = "none"; // TODO: should we use something differen?
|
2019-11-12 11:55:22 +00:00
|
|
|
} else {
|
2020-10-16 12:38:04 +00:00
|
|
|
config.devtool = "cheap-module-source-map"; // TODO: should we use something differen?
|
2019-11-12 11:55:22 +00:00
|
|
|
}
|
|
|
|
|
2019-12-03 12:08:43 +00:00
|
|
|
config.resolve.alias = {
|
|
|
|
...config.resolve.alias,
|
2020-10-16 12:38:04 +00:00
|
|
|
"styled-components": path.resolve("./node_modules/styled-components"),
|
2019-12-03 12:08:43 +00:00
|
|
|
};
|
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
config.devtool = "cheap-module-source-map"; // TODO: should we use something differen?
|
2019-11-12 11:55:22 +00:00
|
|
|
config.module.rules = [
|
|
|
|
// Disable require.ensure as it's not a standard language feature.
|
|
|
|
{ parser: { requireEnsure: false } },
|
|
|
|
// add story source
|
|
|
|
{
|
|
|
|
test: /\.stories\.js$/,
|
2020-10-16 12:38:04 +00:00
|
|
|
loaders: [require.resolve("@storybook/source-loader")],
|
|
|
|
enforce: "pre",
|
2019-11-12 11:55:22 +00:00
|
|
|
},
|
|
|
|
// Process JS with Babel.
|
|
|
|
{
|
|
|
|
test: /\.js$/,
|
|
|
|
include: sourceFolders,
|
|
|
|
use: [
|
|
|
|
{
|
2020-10-16 12:38:04 +00:00
|
|
|
loader: require.resolve("babel-loader"),
|
2019-11-12 11:55:22 +00:00
|
|
|
options: {
|
|
|
|
babelrc: false,
|
|
|
|
compact: false,
|
2020-10-16 12:38:04 +00:00
|
|
|
presets: [require.resolve("../scripts/get-babel-preset")],
|
2019-11-12 11:55:22 +00:00
|
|
|
// This is a feature of `babel-loader` for webpack (not Babel itself).
|
|
|
|
// It enables caching results in ./node_modules/.cache/babel-loader/
|
|
|
|
// directory for faster rebuilds.
|
|
|
|
cacheDirectory: true,
|
|
|
|
highlightCode: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
// For svg icons, we want to get them transformed into React components
|
|
|
|
// when we import them.
|
|
|
|
{
|
|
|
|
test: /\.react\.svg$/,
|
|
|
|
include: sourceFolders,
|
|
|
|
use: [
|
|
|
|
{
|
2020-10-16 12:38:04 +00:00
|
|
|
loader: require.resolve("babel-loader"),
|
2019-11-12 11:55:22 +00:00
|
|
|
options: {
|
|
|
|
babelrc: false,
|
2020-10-16 12:38:04 +00:00
|
|
|
presets: [require.resolve("../scripts/get-babel-preset")],
|
2019-11-12 11:55:22 +00:00
|
|
|
// This is a feature of `babel-loader` for webpack (not Babel itself).
|
|
|
|
// It enables caching results in ./node_modules/.cache/babel-loader/
|
|
|
|
// directory for faster rebuilds.
|
|
|
|
cacheDirectory: true,
|
|
|
|
highlightCode: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
2020-10-16 12:38:04 +00:00
|
|
|
loader: require.resolve("@svgr/webpack"),
|
2019-11-12 11:55:22 +00:00
|
|
|
options: {
|
|
|
|
// NOTE: disable this and manually add `removeViewBox: false` in the SVGO plugins list
|
|
|
|
// See related PR: https://github.com/smooth-code/svgr/pull/137
|
|
|
|
icon: false,
|
|
|
|
svgoConfig: {
|
|
|
|
plugins: [
|
|
|
|
{ removeViewBox: false },
|
|
|
|
// Keeps ID's of svgs so they can be targeted with CSS
|
|
|
|
{ cleanupIDs: false },
|
|
|
|
],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
{
|
|
|
|
test: /\.css$/,
|
2020-10-16 12:38:04 +00:00
|
|
|
use: ["style-loader", "css-loader"],
|
2019-11-12 11:55:22 +00:00
|
|
|
},
|
|
|
|
// Storybook uses a plugin to load and render markdown files.
|
|
|
|
{
|
|
|
|
test: /\.md$/,
|
|
|
|
use: [
|
2020-10-16 12:38:04 +00:00
|
|
|
{ loader: require.resolve("html-loader") },
|
|
|
|
{ loader: require.resolve("markdown-loader") },
|
2019-11-12 11:55:22 +00:00
|
|
|
],
|
2020-10-16 12:38:04 +00:00
|
|
|
},
|
2019-11-12 11:55:22 +00:00
|
|
|
];
|
|
|
|
|
|
|
|
return config;
|
|
|
|
};
|