diff --git a/config/entries.js b/config/entries.js index 39fa4b47..234abaeb 100644 --- a/config/entries.js +++ b/config/entries.js @@ -1,6 +1,6 @@ module.exports = { - app: ['./src/js/index.js', './src/scss/style.scss'], - editor: ['./src/js/editor.js', './src/scss/editor.scss'], - 'post-build': './src/js/post-build.js', - login: './src/scss/login.scss', + app: ['./src/js/index.js', './src/scss/style.scss'], + editor: ['./src/js/editor.js', './src/scss/editor.scss'], + 'post-build': './src/js/post-build.js', + login: './src/scss/login.scss', } diff --git a/config/loaders.js b/config/loaders.js index 75e9e0a7..b84a777c 100644 --- a/config/loaders.js +++ b/config/loaders.js @@ -5,123 +5,123 @@ const nodeModulesPath = path.resolve(__dirname, '../node_modules') const browserslistConfig = require('@wordpress/browserslist-config') function isEditor(loaderContext) { - return loaderContext.resource.indexOf('editor.scss') > -1 + return loaderContext.resource.indexOf('editor.scss') > -1 } module.exports = { - get: function (mode) { - const isProduction = mode === 'production' + get: function (mode) { + const isProduction = mode === 'production' - return [ - /* FontsLoader */ { - test: /\.(woff|woff2)$/, - type: 'asset/resource', - include: [srcPath + '/fonts', nodeModulesPath + '/@fontsource-variable', nodeModulesPath + '/@fontsource'], - generator: { - filename: 'fonts/[name][ext][query]', - }, - }, - /* ImagesLoader */ { - test: /\.(png|jpe?g|gif|svg|avif|webp)$/, - type: 'asset/resource', - exclude: /icons/, - include: srcPath + '/img', - generator: { - filename: 'images/[name][ext][query]', - }, - }, - /* JSLoader */ { - test: /\.js$/i, - include: srcPath + '/js', - use: { - loader: 'esbuild-loader', - options: { - loader: 'js', - target: 'es2016', - legalComments: 'inline', - }, - }, - }, - /* SCSSLoader */ { - test: /\.(scss|css)$/, - include: srcPath + '/scss', - use: [ - MiniCssExtractPlugin.loader, - { - loader: 'css-loader', - options: { - url: true, - esModule: false, - importLoaders: 1, - }, - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: function (loaderContext) { - let obj = { - plugins: { - 'postcss-import': {}, - 'postcss-preset-env': { - browsers: browserslistConfig, - stage: 2, - features: { - // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values - // https://stackoverflow.com/questions/64565180/how-to-prevent-postcss-preset-env-from-removing-css-logical-properties#answer-66966232 - // Use stage 2 features + disable logical properties and values rule - 'logical-properties-and-values': false, - }, - }, - 'postcss-pxtorem': { propWhiteList: [] }, - 'postcss-sort-media-queries': {}, - }, - } + return [ + /* FontsLoader */ { + test: /\.(woff|woff2)$/, + type: 'asset/resource', + include: [srcPath + '/fonts', nodeModulesPath + '/@fontsource-variable', nodeModulesPath + '/@fontsource'], + generator: { + filename: 'fonts/[name][ext][query]', + }, + }, + /* ImagesLoader */ { + test: /\.(png|jpe?g|gif|svg|avif|webp)$/, + type: 'asset/resource', + exclude: /icons/, + include: srcPath + '/img', + generator: { + filename: 'images/[name][ext][query]', + }, + }, + /* JSLoader */ { + test: /\.js$/i, + include: srcPath + '/js', + use: { + loader: 'esbuild-loader', + options: { + loader: 'js', + target: 'es2016', + legalComments: 'inline', + }, + }, + }, + /* SCSSLoader */ { + test: /\.(scss|css)$/, + include: srcPath + '/scss', + use: [ + MiniCssExtractPlugin.loader, + { + loader: 'css-loader', + options: { + url: true, + esModule: false, + importLoaders: 1, + }, + }, + { + loader: 'postcss-loader', + options: { + postcssOptions: function (loaderContext) { + let obj = { + plugins: { + 'postcss-import': {}, + 'postcss-preset-env': { + browsers: browserslistConfig, + stage: 2, + features: { + // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values + // https://stackoverflow.com/questions/64565180/how-to-prevent-postcss-preset-env-from-removing-css-logical-properties#answer-66966232 + // Use stage 2 features + disable logical properties and values rule + 'logical-properties-and-values': false, + }, + }, + 'postcss-pxtorem': { propWhiteList: [] }, + 'postcss-sort-media-queries': {}, + }, + } - if (isProduction && !isEditor(loaderContext)) { - obj.plugins.cssnano = {} - } + if (isProduction && !isEditor(loaderContext)) { + obj.plugins.cssnano = {} + } - return obj - }, - }, - }, - { - loader: 'sass-loader', - options: { - sassOptions: function (loaderContext) { - let obj = { - quietDeps: true, - sourceMap: true, - } + return obj + }, + }, + }, + { + loader: 'sass-loader', + options: { + sassOptions: function (loaderContext) { + let obj = { + quietDeps: true, + sourceMap: true, + } - if (isProduction && isEditor(loaderContext)) { - obj.outputStyle = 'expanded' - } + if (isProduction && isEditor(loaderContext)) { + obj.outputStyle = 'expanded' + } - return obj - }, - }, - }, - ], - }, - /* SVGLoader */ { - test: /\.svg$/, - include: srcPath + '/img/icons', - use: [ - { - loader: 'svg-sprite-loader', - options: { - extract: true, - publicPath: 'icons/', - spriteFilename: (svgPath) => `${/icons([\\|/])(.*?)\1/gm.exec(svgPath)[2]}.svg`, - symbolId: (filePath) => `icon-${path.basename(filePath).slice(0, -4)}`, - }, - }, - { - loader: 'svgo-loader', - }, - ], - }, - ] - }, + return obj + }, + }, + }, + ], + }, + /* SVGLoader */ { + test: /\.svg$/, + include: srcPath + '/img/icons', + use: [ + { + loader: 'svg-sprite-loader', + options: { + extract: true, + publicPath: 'icons/', + spriteFilename: (svgPath) => `${/icons([\\|/])(.*?)\1/gm.exec(svgPath)[2]}.svg`, + symbolId: (filePath) => `icon-${path.basename(filePath).slice(0, -4)}`, + }, + }, + { + loader: 'svgo-loader', + }, + ], + }, + ] + }, } diff --git a/config/svgo.config.js b/config/svgo.config.js index b5373e8d..b0450e0b 100644 --- a/config/svgo.config.js +++ b/config/svgo.config.js @@ -1,38 +1,38 @@ module.exports = { - plugins: [ - { cleanupAttrs: true }, - { removeDoctype: true }, - { removeXMLProcInst: true }, - { removeComments: true }, - { removeMetadata: true }, - { removeTitle: true }, - { removeDesc: true }, - { removeUselessDefs: true }, - { removeEditorsNSData: true }, - { removeEmptyAttrs: true }, - { removeHiddenElems: true }, - { removeEmptyText: true }, - { removeEmptyContainers: true }, - { cleanupEnableBackground: true }, - { convertStyleToAttrs: true }, - { convertColors: true }, - { convertPathData: true }, - { convertTransform: true }, - { removeUnknownsAndDefaults: true }, - { removeNonInheritableGroupAttrs: true }, - { removeUselessStrokeAndFill: true }, - { removeUnusedNS: true }, - { cleanupIDs: true }, - { cleanupNumericValues: true }, - { moveElemsAttrsToGroup: true }, - { moveGroupAttrsToElems: true }, - { collapseGroups: true }, - { removeRasterImages: false }, - { mergePaths: true }, - { convertShapeToPath: true }, - { sortAttrs: true }, - { removeDimensions: false }, - { prefixIds: true }, - { removeViewBox: false }, - ], + plugins: [ + { cleanupAttrs: true }, + { removeDoctype: true }, + { removeXMLProcInst: true }, + { removeComments: true }, + { removeMetadata: true }, + { removeTitle: true }, + { removeDesc: true }, + { removeUselessDefs: true }, + { removeEditorsNSData: true }, + { removeEmptyAttrs: true }, + { removeHiddenElems: true }, + { removeEmptyText: true }, + { removeEmptyContainers: true }, + { cleanupEnableBackground: true }, + { convertStyleToAttrs: true }, + { convertColors: true }, + { convertPathData: true }, + { convertTransform: true }, + { removeUnknownsAndDefaults: true }, + { removeNonInheritableGroupAttrs: true }, + { removeUselessStrokeAndFill: true }, + { removeUnusedNS: true }, + { cleanupIDs: true }, + { cleanupNumericValues: true }, + { moveElemsAttrsToGroup: true }, + { moveGroupAttrsToElems: true }, + { collapseGroups: true }, + { removeRasterImages: false }, + { mergePaths: true }, + { convertShapeToPath: true }, + { sortAttrs: true }, + { removeDimensions: false }, + { prefixIds: true }, + { removeViewBox: false }, + ], } diff --git a/config/webpack.common.js b/config/webpack.common.js index 3a09115a..1e12ba68 100644 --- a/config/webpack.common.js +++ b/config/webpack.common.js @@ -5,49 +5,49 @@ const TerserPlugin = require('terser-webpack-plugin') const svgoconfig = require('./svgo.config') module.exports = { - entry: entries, - output: { - filename: '[name].js', - path: path.resolve(__dirname, '../dist'), - publicPath: '', - assetModuleFilename: 'assets/[hash][ext][query]', - }, - optimization: { - minimizer: [ - new ImageMinimizerPlugin({ - minimizer: { - implementation: ImageMinimizerPlugin.imageminMinify, - options: { - // Lossless optimization with custom option - // Feel free to experiment with options for better result for you - plugins: [ - ['gifsicle', { interlaced: true }], - ['jpegtran', { progressive: true }], - ['optipng', { optimizationLevel: 5 }], - // Svgo configuration here https://github.com/svg/svgo#configuratio - ['svgo', { svgoconfig }], - ], - }, - }, - }), - new TerserPlugin({ - parallel: true, - terserOptions: { - format: { - comments: /translators:/i, - }, - compress: { - passes: 2, - }, - mangle: { - reserved: ['__', '_n', '_nx', '_x'], - }, - }, - extractComments: false, - }), - ], - }, - externals: { - jquery: 'window.jQuery', - }, + entry: entries, + output: { + filename: '[name].js', + path: path.resolve(__dirname, '../dist'), + publicPath: '', + assetModuleFilename: 'assets/[hash][ext][query]', + }, + optimization: { + minimizer: [ + new ImageMinimizerPlugin({ + minimizer: { + implementation: ImageMinimizerPlugin.imageminMinify, + options: { + // Lossless optimization with custom option + // Feel free to experiment with options for better result for you + plugins: [ + ['gifsicle', { interlaced: true }], + ['jpegtran', { progressive: true }], + ['optipng', { optimizationLevel: 5 }], + // Svgo configuration here https://github.com/svg/svgo#configuratio + ['svgo', { svgoconfig }], + ], + }, + }, + }), + new TerserPlugin({ + parallel: true, + terserOptions: { + format: { + comments: /translators:/i, + }, + compress: { + passes: 2, + }, + mangle: { + reserved: ['__', '_n', '_nx', '_x'], + }, + }, + extractComments: false, + }), + ], + }, + externals: { + jquery: 'window.jQuery', + }, } diff --git a/config/webpack.dev.js b/config/webpack.dev.js index 7ba5da52..834f8892 100644 --- a/config/webpack.dev.js +++ b/config/webpack.dev.js @@ -6,14 +6,14 @@ const loaders = require('./loaders') const mode = 'development' module.exports = merge(common, { - mode: mode, - stats: 'errors-only', - devtool: 'inline-source-map', - devServer: { - contentBase: path.join(__dirname, 'public'), - }, - plugins: plugins.get(mode), - module: { - rules: loaders.get(mode), - }, + mode: mode, + stats: 'errors-only', + devtool: 'inline-source-map', + devServer: { + contentBase: path.join(__dirname, 'public'), + }, + plugins: plugins.get(mode), + module: { + rules: loaders.get(mode), + }, }) diff --git a/config/webpack.prod.js b/config/webpack.prod.js index bdc01979..4c0cd0fd 100644 --- a/config/webpack.prod.js +++ b/config/webpack.prod.js @@ -5,16 +5,16 @@ const loaders = require('./loaders') const mode = 'production' module.exports = merge(common, { - mode: mode, - stats: 'minimal', - output: { - filename: '[name]-min.js', - }, - optimization: { - concatenateModules: true, - }, - plugins: plugins.get(mode), - module: { - rules: loaders.get(mode), - }, + mode: mode, + stats: 'minimal', + output: { + filename: '[name]-min.js', + }, + optimization: { + concatenateModules: true, + }, + plugins: plugins.get(mode), + module: { + rules: loaders.get(mode), + }, })