Skip to content

Commit 7af21dc

Browse files
mfranzkeMaximilianJosefBredereck
authored
refactor: updated devDependencies regarding webpack / to webpack version 5 & some cleanup (#1301)
* chore(docs): some typos missed to replace mustache initially and incorrect handlebars two times (both in package name and URL) * Revert "Merge pull request #2 from pattern-lab/dev" This reverts commit 7812878, reversing changes made to 26db979. * Revert "Merge pull request #1 from pattern-lab/dev" This reverts commit 26db979, reversing changes made to fc90750. * Revert "chore(docs): some typos" This reverts commit 271dc8d. * refactor: removed obsolete dependencies Webpack 5 supportes module caching out of the box, compare to e.g. mzgoddard/hard-source-webpack-plugin#514 (comment) * refactor: removed code out of obsolete dependency * refactor: updated clean-css-loader related dependencies * refactor: updated clean-webpack-plugin dependency and restructured the code according to johnagan/clean-webpack-plugin#106 * refactor: updated webpack-merge dependency * refactor: removed obsolete dependencies this seems to have been removed (intentionally?) by 2cb663d#diff-8c9b7dba764c6bd34aaec36a6a42e7b69d9a46b19712a47706355bb8616d3319L365 * refactor: updated html-webpack-plugin dependency * refactor: updated node-sass-magic-importer dependency * refactor: updated style-loader dependency * refactor: updated svg-sprite-loader dependency * refactor: updated svg-transform-loader dependency * refactor: updated svgo-loader dependency * refactor: updated ts-loader dependency * refactor: updated webpack-cli dependency * refactor: updated copy-webpack-plugin dependency * refactor: updated webpack-dev-middleware dependency "the logger, logLevel and logTime options were removed without replacement." source: https://github.com/webpack/webpack-dev-middleware/releases?after=v4.0.0-rc.1 * refactor: updated mini-css-extract-plugin dependency * refactor(webpackdevmiddleware): quiet has been removed a lot earlier even already * refactor: updated no-emit-webpack-plugin dependency * refactor: updated webpack dependency * refactor: rebuild yarn.lock file * refactor(terserplugin): options had an unknown property 'sourceMap' * refactor(webpack): clean up configuration https://webpack.js.org/migrate/5/#clean-up-configuration * Revert "Merge branch 'dev' into refactor-updated-depencencies-webpack" This reverts commit 8f347df, reversing changes made to e619e63. * refactor(webpack): updated outdated options optimization.namedChunks: true → optimization.chunkIds: 'named' source: https://webpack.js.org/migrate/5/#update-outdated-options * refactor(webpack): updated outdated options optimization.occurrenceOrder: true → optimization: { chunkIds: 'total-size', moduleIds: 'size' } source: https://webpack.js.org/migrate/5/#update-outdated-options * refactor: regenerated yarn.lock * refactor: updated babel-loader dependency * refactor: updated svg-sprite-loader dependency * refactor: updated css-loader dependency * refactor: updated postcss-loader dependency * refactor(postcss-loader): added postcss dependency * refactor: updated autoprefixer dependency * refactor: updated copy-webpack-plugin dependency * refactor: updated webpack dependency * refactor: updated webpackbar dependency * refactor: regenerated yarn.lock file * refactor: regenerated yarn.lock file * refactor(prettier): code rework on the prettier feedback * refactor(prettier): code rework on the prettier feedback * build: regenerated yarn.lock file * refactor: updated webpack-cli dependency * refactor: updated webpack dependency * chore: removed unnecessary require entries * build(webpack): 'stats' is the new 'display' * build: regenerated package-lock.json file * Revert "refactor: updated no-emit-webpack-plugin dependency" * build: regenerated yarn.lock file * chore: reverted node-sass-selector-importer update * refactor: updated sass-loader dependency * chore: code optimizations that are mentioned by the github pipeline as well * chore: rebuild yarn.lock file * build: regenerated yarn.lock * build: regenerated yarn.lock file * refactor: updated clean-webpack-plugin * refactor: updated copy-webpack-plugin * refactor: updated html-webpack-plugin * refactor: updated webpack * refactor: updated webpack-cli * refactor: updated webpack-dev-middleware * refactor: updated webpack-hot-middleware * refactor: updated webpack-merge * refactor: updated webpackbar * refactor: updated mini-css-extract-plugin * refactor: updated babel-loader * refactor: updating clean-css-loader * refactor: updated css-loader * refactor: updated postcss-loader * refactor: updated sass-loader * refactor: updated style-loader * refactor: updated svg-sprite-loader * refactor: updated svgo-loader * refactor: updates ts-loader * chore: updated html-loader * refactor: minimize on productive build is the new default https://github.com/webpack-contrib/html-loader/blob/master/CHANGELOG.md#100-2020-03-19 * refactor(webpack): we need to ignore those references as those are generated independently and won't need to get followed by Webpack * refactor(html-loader): interpolate option got removed that for we need to adapt some other solution for the new preprocessor option * fix(copy-webpack-plugin): correcting the path to prevent webpack errors * refactor: two of the options are now subitems of minimize * chore: this attribute doesn't exist (any more) * Restore packages/core/test/files/_handlebars-test-patterns/atoms/global/helloworld-withdata.hbs * Restore packages/core/test/lineage_hunter_tests.js * Restore packages/development-edition-engine-react/source/_meta/_head.html * Restore packages/core/test/pattern_engines_tests.js * Restore packages/core/test/pseudopattern_hunter_tests.js * Restore packages/engine-handlebars/lib/engine_handlebars.js * Restore packages/engine-nunjucks/lib/engine_nunjucks.js * Restore packages/engine-twig-php/lib/engine_twig_php.js * Restore packages/engine-underscore/_meta/_head.html * Restore packages/engine-underscore/lib/engine_underscore.js * Restore packages/uikit-workshop/src/scripts/actions/app.js * chore: regenerated yarn.lock * chore: corrected package.json * fix: we need to import the cjs from handlebars directly * Update webpack.config.js * Update webpack.config.js * Update webpack.config.js * Update webpack.config.js * chore: regenerated yarn.lock * refactor: updated babel-loader dependency again * refactor: updated clean-css-loader dependency again * refactor: updated svgo-loader dependency again --------- Co-authored-by: Maximilian <[email protected]> Co-authored-by: Josef Bredreck <[email protected]>
1 parent 209b9a1 commit 7af21dc

File tree

5 files changed

+912
-1345
lines changed

5 files changed

+912
-1345
lines changed

‎packages/uikit-workshop/build/webpack-server.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -120,10 +120,8 @@ async function serve(patternlab, configPath, buildDir = 'public') {
120120

121121
app.use(
122122
webpackDevMiddleware(compiler, {
123-
quiet: true,
124123
stats: 'errors-warnings',
125124
writeToDisk: true,
126-
logLevel: 'error',
127125
})
128126
);
129127

‎packages/uikit-workshop/package.json‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
"start": "node ./build-tools.js",
88
"prepublish": "npm run build",
99
"postbootstrap": "npm run build",
10-
"build": "webpack-cli --config webpack.config.js --progress --bail --display=minimal",
11-
"watch": "webpack-cli --config webpack.config.js --progress --watch --display=minimal",
10+
"build": "webpack-cli --config webpack.config.js --progress --bail --stats=minimal",
11+
"watch": "webpack-cli --config webpack.config.js --progress --watch --stats=minimal",
1212
"test": "npm run build"
1313
},
1414
"authors": [
@@ -48,32 +48,32 @@
4848
"@pattern-lab/uikit-polyfills": "^5.16.1",
4949
"@reach/visually-hidden": "^0.1.2",
5050
"@webcomponents/custom-elements": "^1.4.3",
51-
"autoprefixer": "^9.6.5",
52-
"babel-loader": "^8.0.6",
51+
"autoprefixer": "^10.2.5",
52+
"babel-loader": "^9.1.2",
5353
"better-opn": "^3.0.0",
5454
"browser-sync": "^2.26.7",
5555
"classnames": "^2.3.1",
56-
"clean-css-loader": "^1.0.1",
57-
"clean-webpack-plugin": "0.1.19",
56+
"clean-css-loader": "^4.2.1",
57+
"clean-webpack-plugin": "4.0.0",
5858
"clipboard": "^2.0.8",
59-
"copy-webpack-plugin": "^5.0.2",
59+
"copy-webpack-plugin": "^11.0.0",
6060
"cosmiconfig": "^7.0.0",
61-
"css-loader": "^3.2.0",
61+
"css-loader": "^6.7.3",
6262
"ejs": "^3.1.6",
6363
"express": "^4.17.1",
6464
"fg-loadjs": "^1.1.0",
6565
"fuse.js": "^6.4.6",
6666
"handlebars": "^4.7.7",
67-
"hard-source-webpack-plugin-patch": "^0.13.3",
6867
"hasha": "^5.2.2",
69-
"html-loader": "^0.5.5",
70-
"html-webpack-plugin": "^4.0.0-beta.11",
68+
"html-loader": "^4.2.0",
69+
"html-webpack-plugin": "^5.5.0",
7170
"lit-element": "^2.2.1",
7271
"lit-html": "^1.1.2",
73-
"mini-css-extract-plugin": "^0.8.0",
72+
"mini-css-extract-plugin": "^2.7.2",
7473
"mousetrap": "^1.6.5",
7574
"portfinder": "^1.0.28",
76-
"postcss-loader": "^3.0.0",
75+
"postcss": "^8.2.8",
76+
"postcss-loader": "^7.0.2",
7777
"preact-render-to-string": "^5.1.1",
7878
"preact": "^10.0.5",
7979
"preload-webpack-plugin": "^3.0.0-beta.3",
@@ -86,21 +86,21 @@
8686
"redux": "4.1.2",
8787
"redux-thunk": "^2.4.0",
8888
"sass": "1.43.4",
89-
"sass-loader": "^10.1.1",
89+
"sass-loader": "^13.2.0",
9090
"scriptjs": "^2.5.9",
9191
"scroll-js": "3.4.x",
9292
"skatejs": "^5.2.4",
93-
"style-loader": "^1.0.0",
94-
"svg-sprite-loader": "^4.1.6",
95-
"svg-transform-loader": "^2.0.8",
96-
"svgo-loader": "^3.0.0",
97-
"ts-loader": "^6.2.1",
98-
"webpack": "^4.41.2",
99-
"webpack-cli": "^3.3.9",
100-
"webpack-dev-middleware": "^3.7.2",
101-
"webpack-hot-middleware": "^2.25.0",
102-
"webpack-merge": "^4.2.2",
103-
"webpackbar": "^4.0.0",
93+
"style-loader": "^3.3.1",
94+
"svg-sprite-loader": "^6.0.11",
95+
"svg-transform-loader": "^2.0.13",
96+
"svgo-loader": "^4.0.0",
97+
"ts-loader": "^9.4.2",
98+
"webpack": "^5.75.0",
99+
"webpack-cli": "^5.0.1",
100+
"webpack-dev-middleware": "^6.0.1",
101+
"webpack-hot-middleware": "^2.25.3",
102+
"webpack-merge": "^5.8.0",
103+
"webpackbar": "5.0.2",
104104
"wolfy87-eventemitter": "^5.2.9",
105105
"yargs": "^17.0.1"
106106
},

‎packages/uikit-workshop/src/html/index.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,16 @@
88
content="initial-scale=1, width=device-width, viewport-fit=cover"
99
/>
1010
<meta name="theme-color" content="#ababab" />
11+
<!-- webpackIgnore: true -->
1112
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
1213

14+
<!-- webpackIgnore: true -->
1315
<link
1416
rel="prefetch"
1517
as="image"
1618
href="styleguide/images/pattern-lab-logo--on-dark.svg"
1719
/>
20+
<!-- webpackIgnore: true -->
1821
<link
1922
rel="prefetch"
2023
as="image"
@@ -28,11 +31,14 @@
2831
<!-- the template for the modal slider -->
2932
<!-- prettier-ignore -->
3033
<script type="text/x-handlebars-template" class="pl-js-panel-template-base">
31-
${require('./partials/base-template.html') }
34+
<include src="partials/base-template.html"/>
3235
</script>
3336

37+
<!-- webpackIgnore: true -->
3438
<script src="styleguide/data/patternlab-data.js" defer></script>
39+
<!-- webpackIgnore: true -->
3540
<script src="annotations/annotations.js" defer></script>
41+
<!-- webpackIgnore: true -->
3642
<script
3743
src="styleguide/js/patternlab-viewer.modern.js"
3844
type="module"
@@ -63,6 +69,7 @@
6369
}
6470
})();
6571
</script>
72+
<!-- webpackIgnore: true -->
6673
<script
6774
src="styleguide/js/patternlab-viewer.js"
6875
defer

‎packages/uikit-workshop/webpack.config.js‎

Lines changed: 39 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
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');
43
const TerserPlugin = require('terser-webpack-plugin');
5-
const autoprefixer = require('autoprefixer');
64
const HtmlWebpackPlugin = require('html-webpack-plugin');
75
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
8-
const webpack = require('webpack');
96
const CopyPlugin = require('copy-webpack-plugin');
107
const path = require('path');
118
const argv = require('yargs').argv;
12-
const merge = require('webpack-merge');
9+
const { merge } = require('webpack-merge');
1310
const WebpackBar = require('webpackbar');
11+
const fs = require('node:fs');
1412

1513
const cosmiconfigSync = require('cosmiconfig').cosmiconfigSync;
1614
const 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 = /\<include src=\"(.+)\"\/?\>(?:\<\/include\>)?/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+
3045
module.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}/styleguide`),
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: /[\\/]node_modules[\\/]/,
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?js(\?.*)?$/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}/index.html`,
351348
`${config.buildDir}/styleguide/css`,
352349
`${config.buildDir}/styleguide/js`,
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

Comments
 (0)