11// webpack.config.js
2- const CleanWebpackPlugin = require ( 'clean-webpack-plugin' ) ;
3- const HardSourceWebpackPlugin = require ( 'hard-source-webpack-plugin-patch' ) ;
2+ const { CleanWebpackPlugin } = require ( 'clean-webpack-plugin' ) ;
43const TerserPlugin = require ( 'terser-webpack-plugin' ) ;
5- const autoprefixer = require ( 'autoprefixer' ) ;
64const HtmlWebpackPlugin = require ( 'html-webpack-plugin' ) ;
75const MiniCssExtractPlugin = require ( 'mini-css-extract-plugin' ) ;
8- const webpack = require ( 'webpack' ) ;
96const CopyPlugin = require ( 'copy-webpack-plugin' ) ;
107const path = require ( 'path' ) ;
118const argv = require ( 'yargs' ) . argv ;
12- const merge = require ( 'webpack-merge' ) ;
9+ const { merge } = require ( 'webpack-merge' ) ;
1310const WebpackBar = require ( 'webpackbar' ) ;
11+ const fs = require ( 'node:fs' ) ;
1412
1513const cosmiconfigSync = require ( 'cosmiconfig' ) . cosmiconfigSync ;
1614const explorerSync = cosmiconfigSync ( 'patternlab' ) ;
@@ -23,10 +21,27 @@ const defaultConfig = {
2321 sourceMaps : true ,
2422 watch : argv . watch ? true : false ,
2523 publicPath : './styleguide/' ,
26- copy : [ { from : './src/images/**' , to : 'images' , flatten : true } ] ,
24+ copy : {
25+ patterns : [
26+ { from : '../uikit-workshop/src/images/**' , to : 'images/[name][ext]' } ,
27+ ] ,
28+ } ,
2729 noViewAll : false ,
2830} ;
2931
32+ // Requiring partials
33+ // adapted from https://github.com/webpack-contrib/html-loader/issues/291#issuecomment-721909576
34+ const INCLUDE_PATTERN = / \< i n c l u d e s r c = \" ( .+ ) \" \/ ? \> (?: \< \/ i n c l u d e \> ) ? / gi;
35+ const processNestedHtml = ( content , loaderContext ) =>
36+ ! INCLUDE_PATTERN . test ( content )
37+ ? content
38+ : content . replace ( INCLUDE_PATTERN , ( m , src ) =>
39+ processNestedHtml (
40+ fs . readFileSync ( path . resolve ( loaderContext . context , src ) , 'utf8' ) ,
41+ loaderContext
42+ )
43+ ) ;
44+
3045module . exports = function ( apiConfig ) {
3146 return new Promise ( async ( resolve ) => {
3247 let customConfig = defaultConfig ;
@@ -109,7 +124,9 @@ module.exports = function (apiConfig) {
109124 loader : 'postcss-loader' ,
110125 options : {
111126 sourceMap : config . sourceMaps ,
112- plugins : ( ) => [ autoprefixer ( ) ] ,
127+ postcssOptions : {
128+ plugins : [ [ 'autoprefixer' , { } ] ] ,
129+ } ,
113130 } ,
114131 } ,
115132 {
@@ -147,7 +164,6 @@ module.exports = function (apiConfig) {
147164 output : {
148165 path : path . resolve ( config . rootDir , `${ config . buildDir } ) ,
149166 publicPath : `${ config . publicPath } ,
150- filename : '[name].js' ,
151167 chunkFilename : `js/[name]-chunk-[chunkhash].js` ,
152168 } ,
153169 module : {
@@ -170,12 +186,11 @@ module.exports = function (apiConfig) {
170186 {
171187 loader : 'html-loader' ,
172188 options : {
173- interpolate : true ,
174- minimize : config . prod ? true : false ,
175- minifyCSS : false ,
176- minifyJS : config . prod ? true : false ,
177- // super important -- this prevents the embedded iframe srcdoc HTML from breaking!
178- preventAttributesEscaping : true ,
189+ minimize : {
190+ minifyCSS : false ,
191+ minifyJS : config . prod ? true : false ,
192+ } ,
193+ preprocessor : processNestedHtml ,
179194 } ,
180195 } ,
181196 ] ,
@@ -225,8 +240,8 @@ module.exports = function (apiConfig) {
225240 mode : config . prod ? 'production' : 'development' ,
226241 optimization : {
227242 minimize : config . prod ,
228- occurrenceOrder : true ,
229- namedChunks : true ,
243+ chunkIds : 'total-size' ,
244+ moduleIds : 'size' ,
230245 removeAvailableModules : true ,
231246 removeEmptyChunks : true ,
232247 nodeEnv : 'production' ,
@@ -235,9 +250,9 @@ module.exports = function (apiConfig) {
235250 splitChunks : {
236251 chunks : 'async' ,
237252 cacheGroups : {
238- vendors : {
253+ defaultVendors : {
239254 test : / [ \\ / ] n o d e _ m o d u l e s [ \\ / ] / ,
240- name : 'vendors' ,
255+ idHint : 'vendors' ,
241256 chunks : 'async' ,
242257 reuseExistingChunk : true ,
243258 } ,
@@ -247,7 +262,6 @@ module.exports = function (apiConfig) {
247262 ? [
248263 new TerserPlugin ( {
249264 test : / \. m ? j s ( \? .* ) ? $ / i,
250- sourceMap : config . prod ? false : config . sourceMaps ,
251265 terserOptions : {
252266 safari10 : true ,
253267 } ,
@@ -258,23 +272,6 @@ module.exports = function (apiConfig) {
258272 plugins : [ new WebpackBar ( ) , new CopyPlugin ( config . copy ) ] ,
259273 } ;
260274
261- webpackConfig . plugins . push (
262- new HardSourceWebpackPlugin ( {
263- info : {
264- level : 'warn' ,
265- } ,
266- // Clean up large, old caches automatically.
267- cachePrune : {
268- // Caches younger than `maxAge` are not considered for deletion. They must
269- // be at least this (default: 2 days) old in milliseconds.
270- maxAge : 2 * 24 * 60 * 60 * 1000 ,
271- // All caches together must be larger than `sizeThreshold` before any
272- // caches will be deleted. Together they must be at least 300MB in size
273- sizeThreshold : 300 * 1024 * 1024 ,
274- } ,
275- } )
276- ) ;
277-
278275 const legacyConfig = merge ( webpackConfig , {
279276 entry : {
280277 'js/patternlab-pattern' : path . join (
@@ -303,7 +300,6 @@ module.exports = function (apiConfig) {
303300 new MiniCssExtractPlugin ( {
304301 filename : `[name].css` ,
305302 chunkFilename : `[id].css` ,
306- allChunks : true ,
307303 } ) ,
308304 ] ,
309305 } ) ;
@@ -343,22 +339,19 @@ module.exports = function (apiConfig) {
343339 } ,
344340 plugins : [
345341 // clear out the buildDir on every fresh Webpack build
346- new CleanWebpackPlugin (
347- config . watch
342+ new CleanWebpackPlugin ( {
343+ verbose : false ,
344+ cleanOnceBeforeBuildPatterns : config . watch
348345 ? [ ]
349346 : [
350347 `${ config . buildDir } ,
351348 `${ config . buildDir } ,
352349 `${ config . buildDir } ,
353350 ] ,
354- {
355- allowExternal : true ,
356- verbose : false ,
357351
358- // perform clean just before files are emitted to the output dir
359- beforeEmit : false ,
360- }
361- ) ,
352+ // perform clean just before files are emitted to the output dir
353+ beforeEmit : false ,
354+ } ) ,
362355 new HtmlWebpackPlugin ( {
363356 filename : '../index.html' ,
364357 template : path . resolve ( __dirname , 'src/html/index.html' ) ,
@@ -367,7 +360,6 @@ module.exports = function (apiConfig) {
367360 new MiniCssExtractPlugin ( {
368361 filename : `[name].css` ,
369362 chunkFilename : `[id].css` ,
370- allChunks : true ,
371363 } ) ,
372364 ] ,
373365 } ) ;
0 commit comments