Skip to content

Commit 2fbd32a

Browse files
scriptexscriptex
committed
Fix CSS HMR and Critical
1 parent 567523f commit 2fbd32a

File tree

7 files changed

+186
-138
lines changed

7 files changed

+186
-138
lines changed

‎critical.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const critical = require('critical');
2+
3+
critical.generate({
4+
src: 'index.html',
5+
css: ['assets/dist/app.css'],
6+
target: 'assets/dist/critical.css',
7+
width: 1440,
8+
height: 900
9+
});

‎index.php

+22-22
Original file line numberDiff line numberDiff line change
@@ -26,35 +26,35 @@ function autoversion($url) {
2626
For more info about the favicons and meta tags below see
2727
https://github.com/audreyr/favicon-cheat-sheet
2828
-->
29-
<link rel="apple-touch-icon" sizes="57x57" href="/assets/images/favicon/apple-touch-icon-57x57.png" />
30-
<link rel="apple-touch-icon" sizes="114x114" href="/assets/images/favicon/apple-touch-icon-114x114.png" />
31-
<link rel="apple-touch-icon" sizes="72x72" href="/assets/images/favicon/apple-touch-icon-72x72.png" />
32-
<link rel="apple-touch-icon" sizes="144x144" href="/assets/images/favicon/apple-touch-icon-144x144.png" />
33-
<link rel="apple-touch-icon" sizes="60x60" href="/assets/images/favicon/apple-touch-icon-60x60.png" />
34-
<link rel="apple-touch-icon" sizes="120x120" href="/assets/images/favicon/apple-touch-icon-120x120.png" />
35-
<link rel="apple-touch-icon" sizes="76x76" href="/assets/images/favicon/apple-touch-icon-76x76.png" />
36-
<link rel="apple-touch-icon" sizes="152x152" href="/assets/images/favicon/apple-touch-icon-152x152.png" />
37-
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-196x196.png" sizes="196x196" />
38-
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-96x96.png" sizes="96x96" />
39-
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-32x32.png" sizes="32x32" />
40-
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-16x16.png" sizes="16x16" />
41-
<link rel="icon" type="image/png" href="/assets/images/favicon/favicon-128.png" sizes="128x128" />
42-
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon/favicon.ico" />
29+
<link rel="apple-touch-icon" sizes="57x57" href="assets/images/favicon/apple-touch-icon-57x57.png" />
30+
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/favicon/apple-touch-icon-114x114.png" />
31+
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/favicon/apple-touch-icon-72x72.png" />
32+
<link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicon/apple-touch-icon-144x144.png" />
33+
<link rel="apple-touch-icon" sizes="60x60" href="assets/images/favicon/apple-touch-icon-60x60.png" />
34+
<link rel="apple-touch-icon" sizes="120x120" href="assets/images/favicon/apple-touch-icon-120x120.png" />
35+
<link rel="apple-touch-icon" sizes="76x76" href="assets/images/favicon/apple-touch-icon-76x76.png" />
36+
<link rel="apple-touch-icon" sizes="152x152" href="assets/images/favicon/apple-touch-icon-152x152.png" />
37+
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-196x196.png" sizes="196x196" />
38+
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-96x96.png" sizes="96x96" />
39+
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-32x32.png" sizes="32x32" />
40+
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-16x16.png" sizes="16x16" />
41+
<link rel="icon" type="image/png" href="assets/images/favicon/favicon-128.png" sizes="128x128" />
42+
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon/favicon.ico" />
4343
<meta name="application-name" content="{ Project Name }"/>
4444
<meta name="msapplication-TileColor" content="#000000" />
45-
<meta name="msapplication-TileImage" content="/assets/images/favicon/mstile-144x144.png" />
46-
<meta name="msapplication-square70x70logo" content="/assets/images/favicon/mstile-70x70.png" />
47-
<meta name="msapplication-square150x150logo" content="/assets/images/favicon/mstile-150x150.png" />
48-
<meta name="msapplication-wide310x150logo" content="/assets/images/favicon/mstile-310x150.png" />
49-
<meta name="msapplication-square310x310logo" content="/assets/images/favicon/mstile-310x310.png" />
50-
<meta name="msapplication-config" content="/config.xml" />
45+
<meta name="msapplication-TileImage" content="assets/images/favicon/mstile-144x144.png" />
46+
<meta name="msapplication-square70x70logo" content="assets/images/favicon/mstile-70x70.png" />
47+
<meta name="msapplication-square150x150logo" content="assets/images/favicon/mstile-150x150.png" />
48+
<meta name="msapplication-wide310x150logo" content="assets/images/favicon/mstile-310x150.png" />
49+
<meta name="msapplication-square310x310logo" content="assets/images/favicon/mstile-310x310.png" />
50+
<meta name="msapplication-config" content="config.xml" />
5151
<meta name="theme-color" content="#000000" />
5252

5353
<?php critical_css(); ?>
5454

55-
<link rel="stylesheet" href="<?php autoversion('/assets/dist/app.css'); ?>" />
55+
<link rel="stylesheet" href="<?php autoversion('assets/dist/app.css'); ?>" />
5656
</head>
5757
<body>
58-
<script src="<?php autoversion('/assets/dist/app.js'); ?>" async defer></script>
58+
<script src="<?php autoversion('assets/dist/app.js'); ?>" async defer></script>
5959
</body>
6060
</html>

‎package.json

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"name": "webpack-mpa-ts",
3-
"version": "3.6.0",
3+
"version": "3.6.1",
44
"description": "Multi page app setup with webpack",
55
"scripts": {
66
"build": "webpack --NODE_ENV=production",
77
"start": "webpack --watch --NODE_ENV=development",
88
"optisize": "optisize --src=\"./assets/images\"",
99
"html": "php index.php > index.html",
10-
"critical": "critical index.html > assets/dist/critical.css",
10+
"critical": "node critical.js",
1111
"rm-html": "rm index.html",
1212
"pwa": "create-pwa --icon=\"./assets/images/favicon/icon.png\" --launch=\"./assets/images/favicon/launch.png\"",
1313
"prod": "yarn build && yarn html && yarn critical && yarn rm-html",
@@ -45,6 +45,7 @@
4545
"@types/postcss-url": "8.0.1",
4646
"@types/svgo": "1.3.3",
4747
"@types/webpack": "4.41.25",
48+
"@types/webpack-shell-plugin": "0.5.0",
4849
"@types/yargs": "15.0.12",
4950
"autoprefixer": "9.8.6",
5051
"awesome-typescript-loader": "5.2.1",
@@ -53,10 +54,10 @@
5354
"clean-webpack-plugin": "1.0.1",
5455
"create-pwa": "2.3.0",
5556
"critical": "2.0.6",
56-
"css-loader": "5.0.1",
57+
"css-loader": "3.5.3",
5758
"cssnano": "4.1.10",
59+
"extract-text-webpack-plugin": "4.0.0-beta.0",
5860
"file-loader": "6.2.0",
59-
"mini-css-extract-plugin": "1.3.3",
6061
"node-sass": "4.14.1",
6162
"node-sass-magic-importer": "5.3.2",
6263
"postcss": "8.2.2",

‎renovate.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,6 @@
99
"vulnerabilityAlerts": {
1010
"labels": ["security"],
1111
"assignees": ["@scriptex"]
12-
}
12+
},
13+
"ignoreDeps": ["css-loader"]
1314
}

‎tsconfig.json

+26-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,33 @@
11
{
22
"compilerOptions": {
33
"outDir": "./assets/dist/",
4-
"sourceMap": true,
4+
"alwaysStrict": true,
5+
"allowSyntheticDefaultImports": true,
6+
"allowJs": false,
7+
"checkJs": false,
8+
"declaration": false,
9+
"emitDecoratorMetadata": true,
10+
"experimentalDecorators": true,
11+
"forceConsistentCasingInFileNames": true,
12+
"importHelpers": true,
13+
"noEmitHelpers": true,
14+
"lib": ["dom", "esNext"],
515
"target": "es5",
6-
"lib": ["es5", "es6", "dom"]
16+
"noEmit": false,
17+
"noEmitOnError": true,
18+
"noFallthroughCasesInSwitch": true,
19+
"noImplicitAny": false,
20+
"noImplicitReturns": true,
21+
"noImplicitThis": true,
22+
"noStrictGenericChecks": false,
23+
"strict": true,
24+
"strictBindCallApply": true,
25+
"strictFunctionTypes": true,
26+
"strictPropertyInitialization": true,
27+
"strictNullChecks": true,
28+
"pretty": true,
29+
"removeComments": false,
30+
"sourceMap": true
731
},
832
"include": ["./assets/scripts/**/*"]
933
}

‎webpack.config.ts

+29-28
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@ import * as webpack from 'webpack';
88
import * as magicImporter from 'node-sass-magic-importer';
99
import * as SpritesmithPlugin from 'webpack-spritesmith';
1010
import * as BrowserSyncPlugin from 'browser-sync-webpack-plugin';
11+
import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
1112
import * as WebpackShellPlugin from 'webpack-shell-plugin';
1213
import * as CleanWebpackPlugin from 'clean-webpack-plugin';
13-
import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
14+
1415
import { Options as SVGOOptions } from 'svgo';
1516
import { Options as BrowsersyncOptions } from 'browser-sync';
1617

@@ -106,8 +107,9 @@ const browserSyncConfig: BrowsersyncOptions = {
106107
proxy: 'localhost'
107108
};
108109

109-
const extractTextConfig: MiniCssExtractPlugin.PluginOptions = {
110-
filename: 'dist/app.css'
110+
const extractTextConfig: ExtractTextPlugin.PluginOptions = {
111+
filename: 'dist/app.css',
112+
allChunks: true
111113
};
112114

113115
const spritesmithConfig = {
@@ -172,28 +174,27 @@ module.exports = (): webpack.Configuration => {
172174
rules: [
173175
{
174176
test: /\.(sa|sc|c)ss$/,
175-
use: [
176-
{
177-
loader: MiniCssExtractPlugin.loader
178-
},
179-
{
180-
loader: 'css-loader',
181-
options: sourceMap
182-
},
183-
{
184-
loader: 'postcss-loader',
185-
options: { postcssOptions }
186-
},
187-
{
188-
loader: 'sass-loader',
189-
options: {
190-
sassOptions: {
191-
importer: magicImporter()
192-
},
193-
...sourceMap
177+
use: ExtractTextPlugin.extract({
178+
use: [
179+
{
180+
loader: 'css-loader',
181+
options: sourceMap
182+
},
183+
{
184+
loader: 'postcss-loader',
185+
options: { postcssOptions }
186+
},
187+
{
188+
loader: 'sass-loader',
189+
options: {
190+
sassOptions: {
191+
importer: magicImporter()
192+
},
193+
...sourceMap
194+
}
194195
}
195-
}
196-
]
196+
]
197+
})
197198
},
198199
{
199200
test: /\.ts$/,
@@ -225,7 +226,7 @@ module.exports = (): webpack.Configuration => {
225226
jQuery: 'jquery',
226227
'window.jQuery': 'jquery'
227228
}),
228-
new MiniCssExtractPlugin(extractTextConfig),
229+
new ExtractTextPlugin(extractTextConfig),
229230
new SpritesmithPlugin(spritesmithConfig),
230231
new CleanWebpackPlugin(['../assets/dist/'], cleanConfig),
231232
new WebpackShellPlugin({
@@ -243,7 +244,7 @@ module.exports = (): webpack.Configuration => {
243244

244245
if (isDevelopment) {
245246
if (url) {
246-
browserSyncConfig.host = parse(url).hostname;
247+
browserSyncConfig.host = parse(url).hostname as any;
247248
browserSyncConfig.proxy = url;
248249
}
249250

@@ -254,10 +255,10 @@ module.exports = (): webpack.Configuration => {
254255
browserSyncConfig.server = true;
255256
}
256257

257-
config.plugins.push(
258+
config.plugins?.push(
258259
new BrowserSyncPlugin(browserSyncConfig, {
259260
reload: false
260-
})
261+
}) as any
261262
);
262263
}
263264

0 commit comments

Comments
 (0)