|
| 1 | +const path = require('path'); |
| 2 | +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
| 3 | +const postcssPurgecss = require('@fullhuman/postcss-purgecss'); |
| 4 | + |
| 5 | +function utilityCssExtractor(content) { |
| 6 | + return content.match(/[a-zA-Z0-9-_.:@\/]+/g); |
| 7 | +} |
| 8 | + |
| 9 | +function createMergedWebpackConfig(gulp, $, config) { |
| 10 | + const argv = require('minimist')(process.argv.slice(2)); |
| 11 | + const purgeCssDisabled = argv.purgecss === false; |
| 12 | + |
| 13 | + const entry = {}; |
| 14 | + const entryCssMeta = {}; |
| 15 | + |
| 16 | + // ---- CSS entries ---- |
| 17 | + (config.styles.files || []).forEach((file) => { |
| 18 | + // key must be unique and stable |
| 19 | + const entryName = `css_${file.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`; |
| 20 | + |
| 21 | + entry[entryName] = path.resolve(config.webdir, file.inputPath); |
| 22 | + entryCssMeta[entryName] = { |
| 23 | + destDir: file.destDir || 'css', |
| 24 | + filename: file.name, |
| 25 | + inputPath: file.inputPath, |
| 26 | + purgeCssConfig: file.purgeCss ?? config.styles.purgeCss ?? null, |
| 27 | + postCssPresetEnvConfig: file.postCssPresetEnv || config.styles.postCssPresetEnv || {}, |
| 28 | + }; |
| 29 | + }); |
| 30 | + |
| 31 | + |
| 32 | + // ---- JS entries ---- |
| 33 | + let includeModules = config.scripts.includeModules ? '|' + config.scripts.includeModules.join('|') : ''; |
| 34 | + let svelteVersion = config.svelteVersion ? parseFloat(config.svelteVersion) : 3; |
| 35 | + |
| 36 | + let resolveModulesPaths = [config.npmdir]; |
| 37 | + if (config.scripts.resolveModulesPaths) { |
| 38 | + resolveModulesPaths = [...new Set([...(config.scripts.resolveModulesPaths), ...resolveModulesPaths])]; |
| 39 | + } |
| 40 | + |
| 41 | + (config.scripts.files || []).forEach((script) => { |
| 42 | + const entryName = `js_${script.name.replace(/[^a-zA-Z0-9_-]/g, '_')}`; |
| 43 | + entry[entryName] = path.resolve(config.webdir, script.inputPath); |
| 44 | + }); |
| 45 | + |
| 46 | + const webpackConfig = { |
| 47 | + entry, |
| 48 | + output: { |
| 49 | + // js_<name> -> js/<name>.js |
| 50 | + filename: (pathData) => { |
| 51 | + const name = pathData.chunk && pathData.chunk.name ? pathData.chunk.name : '[name]'; |
| 52 | + if (name.startsWith('js_')) { |
| 53 | + const cleanName = name.replace(/^js_/, ''); |
| 54 | + return `js/${cleanName}.js`; |
| 55 | + } |
| 56 | + return '[name].js'; |
| 57 | + }, |
| 58 | + path: path.resolve(config.webdir), |
| 59 | + }, |
| 60 | + resolve: { |
| 61 | + alias: { |
| 62 | + svelte: svelteVersion < 4 |
| 63 | + ? $.path.resolve('node_modules', 'svelte') |
| 64 | + : $.path.resolve('node_modules', 'svelte/src/runtime') |
| 65 | + }, |
| 66 | + extensions: ['.mjs', '.js', '.svelte', '.ts'], |
| 67 | + mainFields: ['svelte', 'browser', 'module', 'main'], |
| 68 | + modules: resolveModulesPaths, |
| 69 | + }, |
| 70 | + module: { |
| 71 | + rules: [ |
| 72 | + // JS + Svelte + Typescript |
| 73 | + { |
| 74 | + test: /(\.m?js?$)|(\.svelte$)/, |
| 75 | + exclude: new RegExp('node_modules\\/(?![svelte' + includeModules + '])'), |
| 76 | + use: { |
| 77 | + loader: 'babel-loader', |
| 78 | + options: { |
| 79 | + cacheDirectory: true, |
| 80 | + presets: ['@babel/preset-env'], |
| 81 | + plugins: ['@babel/plugin-transform-runtime'], |
| 82 | + } |
| 83 | + } |
| 84 | + }, |
| 85 | + { |
| 86 | + test: /\.(html|svelte)$/, |
| 87 | + exclude: /node_modules\/(?!svelte)/, |
| 88 | + use: [ |
| 89 | + 'babel-loader', |
| 90 | + { |
| 91 | + loader: 'svelte-loader', |
| 92 | + options: { |
| 93 | + cacheDirectory: true, |
| 94 | + emitCss: false, |
| 95 | + }, |
| 96 | + }, |
| 97 | + ], |
| 98 | + }, |
| 99 | + { |
| 100 | + // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4 |
| 101 | + test: /node_modules\/svelte\/.*\.mjs$/, |
| 102 | + resolve: { |
| 103 | + fullySpecified: false, |
| 104 | + } |
| 105 | + }, |
| 106 | + { |
| 107 | + test: /\.tsx?$/, |
| 108 | + use: 'ts-loader', |
| 109 | + exclude: /node_modules/, |
| 110 | + }, |
| 111 | + |
| 112 | + // Assets used from SCSS |
| 113 | + { |
| 114 | + test: /\.(png|jpe?g|gif|svg|webp|avif)$/i, |
| 115 | + type: 'asset/resource', |
| 116 | + generator: { |
| 117 | + filename: 'img/[name].[hash][ext]' |
| 118 | + } |
| 119 | + }, |
| 120 | + |
| 121 | + // SCSS -> CSS (via MiniCssExtractPlugin) |
| 122 | + { |
| 123 | + test: /\.s[ac]ss$/i, |
| 124 | + use: [ |
| 125 | + MiniCssExtractPlugin.loader, |
| 126 | + { |
| 127 | + loader: 'css-loader', |
| 128 | + options: { sourceMap: true } |
| 129 | + }, |
| 130 | + { |
| 131 | + loader: 'resolve-url-loader', |
| 132 | + }, |
| 133 | + { |
| 134 | + loader: 'postcss-loader', |
| 135 | + options: { |
| 136 | + sourceMap: true, |
| 137 | + postcssOptions: (loaderContext) => { |
| 138 | + // Match resource path to entry path from entryCssMeta |
| 139 | + const resourcePath = loaderContext.resourcePath; |
| 140 | + let cssEntry = null; |
| 141 | + |
| 142 | + for (const [entryName, meta] of Object.entries(entryCssMeta)) { |
| 143 | + if (meta.inputPath && resourcePath.includes(meta.inputPath)) { |
| 144 | + cssEntry = meta; |
| 145 | + break; |
| 146 | + } |
| 147 | + } |
| 148 | + |
| 149 | + if (!cssEntry) { |
| 150 | + throw new Error( |
| 151 | + `No CSS entry metadata found for resource: ${resourcePath}\n` + |
| 152 | + `Available entries: ${Object.keys(entryCssMeta).join(', ')}\n` + |
| 153 | + `Ensure the SCSS file is an exact webpack entry point from config.styles.files[].inputPath` |
| 154 | + ); |
| 155 | + } |
| 156 | + |
| 157 | + const postCssPresetEnvConfig = cssEntry.postCssPresetEnvConfig || {}; |
| 158 | + |
| 159 | + return { |
| 160 | + plugins: [ |
| 161 | + require('postcss-preset-env')(postCssPresetEnvConfig), |
| 162 | + ...(cssEntry.purgeCssConfig && !purgeCssDisabled |
| 163 | + ? [postcssPurgecss({ |
| 164 | + content: cssEntry.purgeCssConfig.content, |
| 165 | + extractors: [{ |
| 166 | + extractor: utilityCssExtractor, |
| 167 | + extensions: ['php', 'twig', 'js', 'svg'] |
| 168 | + }], |
| 169 | + safelist: cssEntry.purgeCssConfig.safelist, |
| 170 | + })] |
| 171 | + : []), |
| 172 | + ], |
| 173 | + }; |
| 174 | + }, |
| 175 | + }, |
| 176 | + }, |
| 177 | + { |
| 178 | + loader: 'sass-loader', |
| 179 | + options: { |
| 180 | + implementation: 'sass-embedded', |
| 181 | + api: 'modern', |
| 182 | + sourceMap: true, |
| 183 | + sassOptions: { |
| 184 | + loadPaths: config.styles.includePaths |
| 185 | + ? config.styles.includePaths |
| 186 | + : [config.npmdir], |
| 187 | + }, |
| 188 | + }, |
| 189 | + }, |
| 190 | + ], |
| 191 | + }, |
| 192 | + ], |
| 193 | + }, |
| 194 | + plugins: [ |
| 195 | + // jQuery globals for JS, as before |
| 196 | + new $.webpack.ProvidePlugin({ |
| 197 | + $: 'jquery', |
| 198 | + jQuery: 'jquery', |
| 199 | + }), |
| 200 | + |
| 201 | + // CSS extraction with per‑entry filenames |
| 202 | + new MiniCssExtractPlugin({ |
| 203 | + filename: (pathData) => { |
| 204 | + const name = pathData.chunk && pathData.chunk.name ? pathData.chunk.name : '[name]'; |
| 205 | + |
| 206 | + if (name.startsWith('css_')) { |
| 207 | + const meta = entryCssMeta[name]; |
| 208 | + if (meta) { |
| 209 | + const dir = meta.destDir ? meta.destDir.replace(/\/+$/, '') : 'css'; |
| 210 | + return `${dir}/${meta.filename}`; |
| 211 | + } |
| 212 | + } |
| 213 | + |
| 214 | + // fallback |
| 215 | + return 'css/[name].css'; |
| 216 | + }, |
| 217 | + }), |
| 218 | + ], |
| 219 | + mode: config.development && $.argv.prod !== true ? 'development' : 'production', |
| 220 | + devtool: $.argv.debug === true ? 'source-map' : false, |
| 221 | + stats: { |
| 222 | + preset: 'normal', |
| 223 | + timings: true, |
| 224 | + }, |
| 225 | + }; |
| 226 | + |
| 227 | + return webpackConfig; |
| 228 | +} |
| 229 | + |
| 230 | +function webpackMerged(gulp, $, config) { |
| 231 | + const webpackStream = require('webpack-stream'); |
| 232 | + const webpack = $.webpack; |
| 233 | + |
| 234 | + return gulp.src(config.webdir + '/**/*.{js,scss}') |
| 235 | + .pipe(webpackStream(createMergedWebpackConfig(gulp, $, config), webpack)) |
| 236 | + .pipe(gulp.dest(config.webdir)) |
| 237 | + .pipe($.browserSync.reload({ stream: true })); |
| 238 | +} |
| 239 | + |
| 240 | +exports.webpackMerged = webpackMerged; |
| 241 | +exports.createMergedWebpackConfig = createMergedWebpackConfig; |
0 commit comments