Skip to content

Instantly share code, notes, and snippets.

@tranthaison1231
Created July 15, 2021 08:55
Show Gist options
  • Select an option

  • Save tranthaison1231/d1cfb82a1a9a23c6b4909a61dc0fdd47 to your computer and use it in GitHub Desktop.

Select an option

Save tranthaison1231/d1cfb82a1a9a23c6b4909a61dc0fdd47 to your computer and use it in GitHub Desktop.
const path = require('path');
const webpack = require('webpack');
const withLess = require('@zeit/next-less');
const withPlugins = require('next-compose-plugins');
const generateTheme = require('next-dynamic-antd-theme/plugin');
const withCss = require('@zeit/next-css');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
const UnusedWebpackPlugin = require('unused-webpack-plugin');
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const { i18n } = require('./next-i18next.config');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
// const cssLoaderGetLocalIdent = require('css/lib/getLocalIdent.js');
const theme = require('./theme/theme.json');
const withTM = require('next-transpile-modules')(['@artcific/uikit']);
const _nextConfig = { i18n };
const prod = process.env.NODE_ENV === 'production';
const prefix = prod ? '/next-dynamic-antd-theme/' : '/';
const withAntdTheme = generateTheme({
antDir: path.join(__dirname, './node_modules/antd'),
stylesDir: path.join(__dirname, './theme'),
varFile: path.join(__dirname, './theme/vars.less'),
outputFilePath: path.join(__dirname, './.next/static/color.less'),
lessFilePath: `${prefix}_next/static/color.less`,
lessJSPath:
'https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.3/less.min.js',
customThemes: { dark: { '@primary-color': theme.palette.primary } },
});
// if (typeof require !== 'undefined') {
// require.extensions['.less'] = (file) => {};
// }
// if (typeof require !== 'undefined') {
// require.extensions['.css'] = (file) => {};
// }
const withAntd = (nextConfig = {}) => ({
...nextConfig,
lessLoaderOptions: {
javascriptEnabled: true,
modifyVars: {
'@font-family': theme.fonts.primary,
'@text-color': theme.text.primary,
'@primary-color': theme.palette.primary,
'@layout-body-background': theme.background.content,
'@card-padding-base': '15px',
'@input-height-base': '45px',
'@input-placeholder-color': theme.text.placeholder,
'@input-bg': theme.background.input,
'@border-radius-base': '10px',
'@input-border-color': 'transparent',
'@btn-height-base': '40px',
'@height-sm': '30px',
'@form-item-margin-bottom': '10px',
'@modal-header-close-size': '80px',
'@modal-header-padding-vertical': '30px',
},
},
// cssModules: true,
// cssLoaderOptions: {
// ...nextConfig.cssLoaderOptions,
// camelCase: true,
// localIdentName: '[local]___[hash:base64:5]',
// },
images: {
domains: ['image.artcific.com'],
},
webpack(config, options) {
config.resolve.alias.react = path.resolve(
__dirname,
'.',
'node_modules',
'react',
);
config.resolve.alias.link = path.resolve(
__dirname,
'.',
'node_modules',
'next',
'link',
);
config.resolve.alias.image = path.resolve(
__dirname,
'.',
'components',
'Image.js',
);
if (config.externals) {
const includes = [/antd/];
config.externals = config.externals.map((external) => {
if (typeof external !== 'function') return external;
return (ctx, req, cb) =>
includes.find((include) =>
req.startsWith('.')
? include.test(path.resolve(ctx, req))
: include.test(req),
)
? cb()
: external(ctx, req, cb);
});
}
if (options.isServer) {
const antStyles = /(antd\/.*?\/style).*(?<![.]js)$/;
const origExternals = [...config.externals];
config.externals = [
(context, request, callback) => {
if (request.match(antStyles)) return callback();
if (typeof origExternals[0] === 'function') {
origExternals[0](context, request, callback);
} else {
callback();
}
},
...(typeof origExternals[0] === 'function' ? [] : origExternals),
];
config.module.rules.unshift({
test: antStyles,
use: 'null-loader',
});
}
config.module.rules.push({
test: /\.(eot|woff|woff2|ttf|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]',
},
},
});
config.resolve.modules.push(path.resolve('.'));
config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
config.plugins.push(new AntdDayjsWebpackPlugin());
// config.plugins.push( new UnusedWebpackPlugin({
// // Source directories
// directories: [path.join(__dirname)],
// // Exclude patterns
// exclude: ['node_modules','public'],
// // Root directory (optional)
// root: __dirname,
// }));
// config.plugins.push(new OptimizeCssAssetsPlugin({
// assetNameRegExp: /\.optimize\.css$/g,
// cssProcessor: require('cssnano'),
// cssProcessorPluginOptions: {
// preset: ['default', { discardComments: { removeAll: true } }],
// },
// canPrint: true,
// }));
// config.plugins.push(new DuplicatePackageCheckerPlugin());
return config;
},
});
const plugins = [
// withBundleAnalyzer(
withTM(
withCss(
withLess(
withAntdTheme(
withAntd(() => ({
assetPrefix: prefix,
})),
),
),
),
),
// ),
];
module.exports = withPlugins(plugins, _nextConfig);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment