2021-03-24 10:55:50 +00:00
|
|
|
const CopyPlugin = require("copy-webpack-plugin");
|
2023-01-16 09:59:09 +00:00
|
|
|
const path = require("path");
|
|
|
|
|
|
|
|
const pathToAssets = path.resolve(__dirname, "../../../public/images");
|
2021-03-24 10:55:50 +00:00
|
|
|
|
2021-03-01 19:09:08 +00:00
|
|
|
module.exports = ({ config }) => {
|
|
|
|
const rules = config.module.rules;
|
|
|
|
|
2023-01-27 14:10:22 +00:00
|
|
|
config.resolve.alias = {
|
|
|
|
PUBLIC_DIR: path.resolve(__dirname, "../../../public"),
|
|
|
|
};
|
|
|
|
|
2021-03-01 19:09:08 +00:00
|
|
|
const fileLoaderRule = rules.find((rule) => rule.test.test(".svg"));
|
2023-01-16 09:59:09 +00:00
|
|
|
fileLoaderRule.exclude = /\.svg$/;
|
|
|
|
|
|
|
|
config.output.assetModuleFilename = (pathData) => {
|
|
|
|
//console.log({ pathData });
|
|
|
|
|
|
|
|
let result = pathData.filename
|
|
|
|
.substr(pathData.filename.indexOf("public/"))
|
|
|
|
.split("/")
|
|
|
|
.slice(1);
|
|
|
|
|
|
|
|
result.pop();
|
|
|
|
|
|
|
|
let folder = result.join("/");
|
|
|
|
|
2023-01-24 14:37:18 +00:00
|
|
|
folder += result.length === 0 ? "" : "/";
|
|
|
|
|
|
|
|
return `${folder}[name][ext]?hash=[contenthash]`; //`${folder}/[name].[contenthash][ext]`; ;
|
2023-01-16 09:59:09 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
// rules.push({
|
|
|
|
// test: /\.(png|jpe?g|gif|ico)$/i,
|
|
|
|
// type: "asset/resource",
|
|
|
|
// });
|
2023-03-13 11:57:47 +00:00
|
|
|
rules.push({
|
|
|
|
test: /\.s[ac]ss$/i,
|
|
|
|
use: [
|
|
|
|
// Creates `style` nodes from JS strings
|
|
|
|
"style-loader",
|
|
|
|
// Translates CSS into CommonJS
|
|
|
|
{
|
|
|
|
loader: "css-loader",
|
|
|
|
options: {
|
|
|
|
url: {
|
|
|
|
filter: (url, resourcePath) => {
|
|
|
|
// resourcePath - path to css file
|
|
|
|
|
|
|
|
// Don't handle `/static` urls
|
|
|
|
if (url.startsWith("/static") || url.startsWith("data:")) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
return true;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
// Compiles Sass to CSS
|
|
|
|
"sass-loader",
|
|
|
|
],
|
|
|
|
});
|
2023-01-16 09:59:09 +00:00
|
|
|
|
|
|
|
rules.push({
|
|
|
|
test: /\.svg$/i,
|
|
|
|
type: "asset/resource",
|
|
|
|
resourceQuery: /url/, // *.svg?url
|
|
|
|
});
|
2021-03-01 19:09:08 +00:00
|
|
|
|
|
|
|
rules.push({
|
2023-01-16 09:59:09 +00:00
|
|
|
test: /\.svg$/i,
|
|
|
|
resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
|
2021-03-01 19:09:08 +00:00
|
|
|
use: [
|
|
|
|
{
|
|
|
|
loader: "@svgr/webpack",
|
|
|
|
options: {
|
|
|
|
svgoConfig: {
|
|
|
|
plugins: [{ removeViewBox: false }],
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
});
|
|
|
|
|
2023-01-16 09:59:09 +00:00
|
|
|
// config.plugins.push(
|
|
|
|
// new CopyPlugin({
|
|
|
|
// patterns: [
|
|
|
|
// {
|
|
|
|
// from: "../../../public/images",
|
|
|
|
// to: "./images",
|
|
|
|
// toType: "dir",
|
|
|
|
// context: "storybook-static",
|
|
|
|
// },
|
|
|
|
// ],
|
|
|
|
// })
|
|
|
|
// );
|
2021-03-24 10:55:50 +00:00
|
|
|
|
2021-03-01 19:09:08 +00:00
|
|
|
return config;
|
|
|
|
};
|