jonny/jonnybarnes.uk
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases 5 Packages Wiki Activity Actions

refactor: Refactor webpack config and asset handling

Browse source 
- Improve webpack performance and configuration
- Delete unnecessary CSS and binary files
- Adjust ESLint ignored files list
- Update package.json with webpack mode for dev and prod scripts
- Move app.css to app.js in master.blade.php
This commit is contained in:
Jonny Barnes 2023-05-08 21:56:05 +01:00
parent 8a56827b13
commit 57bd41febf
Signed by: jonny
SSH key fingerprint: SHA256:CTuSlns5U7qlD9jqHvtnVmfYV3Zwl2Z7WnJ4/dqOaL8
9 changed files with 39 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintrc.yml
View file

@ -4,6 +4,8 @@ extends: 'eslint:recommended'
env:
browser: true
es6: true
ignorePatterns:
- webpack.config.js
rules:
indent:
- error

53
package-lock.json generated
View file

@ -20,13 +20,13 @@
"cssnano": "^6.0.1",
"eslint": "^8.39.0",
"eslint-webpack-plugin": "^4.0.1",
"mini-css-extract-plugin": "^2.7.5",
"postcss": "^8.4.23",
"postcss-combine-duplicated-selectors": "^10.0.2",
"postcss-combine-media-query": "^1.0.1",
"postcss-import": "^15.1.0",
"postcss-loader": "^7.3.0",
"postcss-nesting": "^11.2.2",
"style-loader": "^3.3.2",
"stylelint": "^15.6.1",
"stylelint-config-standard": "^33.0.0",
"stylelint-webpack-plugin": "^4.1.1",
@ -4852,25 +4852,6 @@
"node": ">=4"
}
},
"node_modules/mini-css-extract-plugin": {
"version": "2.7.5",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.5.tgz",
"integrity": "sha512-9HaR++0mlgom81s95vvNjxkg52n2b5s//3ZTI1EtzFb98awsLSivs2LMsVqnQ3ay0PVhqWcGNyDaTE961FOcjQ==",
"dev": true,
"dependencies": {
"schema-utils": "^4.0.0"
},
"engines": {
"node": ">= 12.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"webpack": "^5.0.0"
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -6468,6 +6449,22 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/style-loader": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.2.tgz",
"integrity": "sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==",
"dev": true,
"engines": {
"node": ">= 12.13.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/webpack"
},
"peerDependencies": {
"webpack": "^5.0.0"
}
},
"node_modules/style-search": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
@ -10742,15 +10739,6 @@
"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
"dev": true
},
"mini-css-extract-plugin": {
"version": "2.7.5",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.5.tgz",
"integrity": "sha512-9HaR++0mlgom81s95vvNjxkg52n2b5s//3ZTI1EtzFb98awsLSivs2LMsVqnQ3ay0PVhqWcGNyDaTE961FOcjQ==",
"dev": true,
"requires": {
"schema-utils": "^4.0.0"
}
},
"minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@ -11855,6 +11843,13 @@
"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
"dev": true
},
"style-loader": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.2.tgz",
"integrity": "sha512-RHs/vcrKdQK8wZliteNK4NKzxvLBzpuHMqYmUVWeKa6MkaIQ97ZTOS0b+zapZhy6GcrgWnvWYCMHRirC3FsUmw==",
"dev": true,
"requires": {}
},
"style-search": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",

6
package.json
View file

@ -16,13 +16,13 @@
"cssnano": "^6.0.1",
"eslint": "^8.39.0",
"eslint-webpack-plugin": "^4.0.1",
"mini-css-extract-plugin": "^2.7.5",
"postcss": "^8.4.23",
"postcss-combine-duplicated-selectors": "^10.0.2",
"postcss-combine-media-query": "^1.0.1",
"postcss-import": "^15.1.0",
"postcss-loader": "^7.3.0",
"postcss-nesting": "^11.2.2",
"style-loader": "^3.3.2",
"stylelint": "^15.6.1",
"stylelint-config-standard": "^33.0.0",
"stylelint-webpack-plugin": "^4.1.1",
@ -30,8 +30,8 @@
"webpack-cli": "^5.0.2"
},
"scripts": {
"dev": "webpack",
"prod": "NODE_ENV=production webpack"
"dev": "webpack --mode=development",
"prod": "webpack --mode=production"
},
"browserslist": [
"last 2 versions",

1
public/assets/app.css vendored
View file

@ -1 +0,0 @@
:root{--font-family-headings:"Archer SSm A","Archer SSm B",serif;--font-family-body:"Verlag A","Verlag B",sans-serif;--font-family-monospace:"Operator Mono SSm A","Operator Mono SSm B",monospace;--font-size-sm:0.75rem;--font-size-base:1rem;--font-size-md:1.25rem;--font-size-lg:1.5rem;--font-size-xl:1.75rem;--font-size-xxl:2rem;--font-size-xxxl:2.25rem;--color-primary:#334800;--color-secondary:#e3ffb5;--color-link:#0064a5;--color-link-visited:#be76ff;--color-primary-shadow:rgba(15,25,0,.4)}@supports (color:color(display-p3 0 0 0)){:root{--color-primary:color(display-p3 0.21567 0.27838 0.03615);--color-secondary:color(display-p3 0.91016 0.99842 0.74082);--color-link:color(display-p3 0.01045 0.38351 0.63618);--color-link-visited:color(display-p3 0.70467 0.47549 0.99958);--color-primary-shadow:color(display-p3 0.06762 0.09646 0.00441/0.4)}}@supports (color:oklch(0% 0 0)){:root{--color-primary:oklch(36.8% 0.1 125.505);--color-secondary:oklch(96.3% 0.1 125.505);--color-link:oklch(48.09% 0.146 241.41);--color-link-visited:oklch(70.44% 0.21 304.41);--color-primary-shadow:oklch(19.56% 0.054 125.505/40%)}}body{background-color:var(--color-secondary);color:var(--color-primary);font-family:var(--font-family-body);font-size:var(--font-size-md)}code{font-family:var(--font-family-monospace)}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-headings)}.grid{display:grid;grid-template-columns:5vw 1fr 5vw;grid-template-rows:-webkit-min-content 1fr -webkit-min-content;grid-template-rows:min-content 1fr min-content;row-gap:1rem}#site-header{grid-column:2/3;grid-row:1/2}main{grid-row:2/3}footer,main{grid-column:2/3}footer{grid-row:3/4}footer .iwc-logo{max-width:85vw}a{color:var(--color-link)}a:visited{color:var(--color-link-visited)}#site-header a:visited{color:var(--color-link)}.hljs{border-radius:.5rem}.p-bridgy-twitter-content{display:none}.h-card .hovercard{-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--color-secondary);border-radius:1rem;-webkit-box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);box-shadow:0 .5rem .5rem .5rem var(--color-primary-shadow);display:none;-ms-flex-direction:column;flex-direction:column;gap:.5rem;opacity:0;padding:1rem;position:absolute;-webkit-transition:opacity .5s ease-in-out;transition:opacity .5s ease-in-out;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;z-index:100}.h-card .hovercard .u-photo{max-width:6rem}.h-card .hovercard .social-icon{height:1rem;width:1rem}.h-card:hover .hovercard{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1}.h-entry{-webkit-border-start:1px solid var(--color-primary);-webkit-padding-start:.5rem;border-inline-start:1px solid var(--color-primary);padding-inline-start:.5rem}.h-entry .reply-to{font-style:italic}.h-entry .post-info a{text-decoration:none}.h-entry .note-metadata{-webkit-box-orient:horizontal;-webkit-box-direction:normal;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:1rem}.h-entry .note-metadata .syndication-links{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap}.h-entry .note-metadata .syndication-links a{text-decoration:none}.h-entry .note-metadata .syndication-links a svg{height:1rem;width:1rem}

BIN
public/assets/app.css.br
View file

Binary file not shown.

1
public/assets/app.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
public/assets/app.js.br
View file

Binary file not shown.

2
resources/views/master.blade.php
View file

@ -7,7 +7,6 @@
@if (!empty(config('app.font_link')))
<link rel="stylesheet" href="{{ config('app.font_link') }}">
@endif
<link rel="stylesheet" href="/assets/app.css">
<link rel="stylesheet" href="/assets/highlight/zenburn.css">
<link rel="alternate" type="application/rss+xml" title="Blog RSS Feed" href="/blog/feed.rss">
<link rel="alternate" type="application/atom+xml" title="Blog Atom Feed" href="/blog/feed.atom">
@ -60,6 +59,7 @@
<!--scripts go here when needed-->
@section('scripts')
<script src="/assets/app.js"></script>
@show
</body>
</html>

18
webpack.config.js vendored
View file

@ -1,13 +1,11 @@
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const zlib = require('zlib');
const EslintPlugin = require('eslint-webpack-plugin');
module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
devtool: 'source-map',
devtool: 'eval-source-map',
entry: ['./resources/js/app.js'],
output: {
path: path.resolve('./public/assets'),
@ -18,7 +16,9 @@ module.exports = {
test: /\.css$/,
exclude: /node_modules/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
@ -41,19 +41,17 @@ module.exports = {
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
presets: [
['@babel/preset-env', { targets: "defaults" }]
]
}
}
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'app.css',
chunkFilename: 'app.css',
}),
new StyleLintPlugin({
configFile: path.resolve(__dirname + '/.stylelintrc'),
context: path.resolve(__dirname + '/resources/css-2023'),
context: path.resolve(__dirname + '/resources/css'),
files: '**/*.css',
}),
new EslintPlugin({