Skip to content

Commit e6cac36

Browse files
benmccannbenmccann
authored
Update template to Webpack 5 and new svelte-loader
2 parents 72e2154 + a0ca8ab commit e6cac36

File tree

6 files changed

+71
-41
lines changed

6 files changed

+71
-41
lines changed

‎package.json

+9-11
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,17 @@
22
"name": "svelte-app",
33
"version": "1.0.0",
44
"devDependencies": {
5-
"cross-env": "^5.2.0",
6-
"css-loader": "^2.1.1",
7-
"mini-css-extract-plugin": "^0.6.0",
8-
"serve": "^11.0.0",
9-
"style-loader": "^0.23.1",
10-
"svelte": "^3.0.0",
11-
"svelte-loader": "2.13.3",
12-
"webpack": "^4.30.0",
13-
"webpack-cli": "^3.3.0",
14-
"webpack-dev-server": "^3.3.1"
5+
"cross-env": "^7.0.3",
6+
"css-loader": "^5.0.1",
7+
"mini-css-extract-plugin": "^1.3.4",
8+
"svelte": "^3.31.2",
9+
"svelte-loader": "^3.0.0",
10+
"webpack": "^5.16.0",
11+
"webpack-cli": "^4.4.0",
12+
"webpack-dev-server": "^3.11.2"
1513
},
1614
"scripts": {
1715
"build": "cross-env NODE_ENV=production webpack",
18-
"dev": "webpack-dev-server --content-base public"
16+
"dev": "webpack serve --content-base public"
1917
}
2018
}

‎public/index.html

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
<!doctype html>
2-
<html>
1+
<!DOCTYPE html>
2+
<html lang="en">
33
<head>
4-
<meta charset='utf8'>
5-
<meta name='viewport' content='width=device-width'>
4+
<meta charset='utf-8'>
5+
<meta name='viewport' content='width=device-width,initial-scale=1'>
66

77
<title>Svelte app</title>
88

9-
<link rel='icon' type='image/png' href='favicon.png'>
10-
<link rel='stylesheet' href='global.css'>
11-
<link rel='stylesheet' href='bundle.css'>
9+
<link rel='icon' type='image/png' href='/favicon.png'>
10+
<link rel='stylesheet' href='/build/bundle.css'>
11+
12+
<script defer src='/build/bundle.js'></script>
1213
</head>
1314

1415
<body>
15-
<script src='bundle.js'></script>
1616
</body>
17-
</html>
17+
</html>

‎src/App.svelte

+22-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,29 @@
22
export let name;
33
</script>
44

5+
<main>
6+
<h1>Hello {name}!</h1>
7+
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
8+
</main>
9+
510
<style>
11+
main {
12+
text-align: center;
13+
padding: 1em;
14+
max-width: 240px;
15+
margin: 0 auto;
16+
}
17+
618
h1 {
7-
color: purple;
19+
color: #ff3e00;
20+
text-transform: uppercase;
21+
font-size: 4em;
22+
font-weight: 100;
823
}
9-
</style>
1024
11-
<h1>Hello {name}!</h1>
25+
@media (min-width: 640px) {
26+
main {
27+
max-width: none;
28+
}
29+
}
30+
</style>

‎public/global.css ‎src/global.css

+8-6
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ label {
3232
input, button, select, textarea {
3333
font-family: inherit;
3434
font-size: inherit;
35+
-webkit-padding: 0.4em 0;
3536
padding: 0.4em;
3637
margin: 0 0 0.5em 0;
3738
box-sizing: border-box;
@@ -43,19 +44,20 @@ input:disabled {
4344
color: #ccc;
4445
}
4546

46-
input[type="range"] {
47-
height: 0;
48-
}
49-
5047
button {
48+
color: #333;
5149
background-color: #f4f4f4;
5250
outline: none;
5351
}
5452

55-
button:active {
53+
button:disabled {
54+
color: #999;
55+
}
56+
57+
button:not(:disabled):active {
5658
background-color: #ddd;
5759
}
5860

5961
button:focus {
6062
border-color: #666;
61-
}
63+
}

‎src/main.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import './global.css';
2+
13
import App from './App.svelte';
24

35
const app = new App({
@@ -9,4 +11,4 @@ const app = new App({
911

1012
window.app = app;
1113

12-
export default app;
14+
export default app;

‎webpack.config.js

+20-11
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,17 @@ const prod = mode === 'production';
66

77
module.exports = {
88
entry: {
9-
bundle: ['./src/main.js']
9+
'build/bundle': ['./src/main.js']
1010
},
1111
resolve: {
1212
alias: {
13-
svelte: path.resolve('node_modules', 'svelte')
13+
svelte: path.dirname(require.resolve('svelte/package.json'))
1414
},
1515
extensions: ['.mjs', '.js', '.svelte'],
1616
mainFields: ['svelte', 'browser', 'module', 'main']
1717
},
1818
output: {
19-
path: __dirname + '/public',
19+
path: path.join(__dirname, '/public'),
2020
filename: '[name].js',
2121
chunkFilename: '[name].[id].js'
2222
},
@@ -27,21 +27,27 @@ module.exports = {
2727
use: {
2828
loader: 'svelte-loader',
2929
options: {
30-
emitCss: true,
31-
hotReload: true
30+
compilerOptions: {
31+
dev: !prod
32+
},
33+
emitCss: prod,
34+
hotReload: !prod
3235
}
3336
}
3437
},
3538
{
3639
test: /\.css$/,
3740
use: [
38-
/**
39-
* MiniCssExtractPlugin doesn't support HMR.
40-
* For developing, use 'style-loader' instead.
41-
* */
42-
prod ? MiniCssExtractPlugin.loader : 'style-loader',
41+
MiniCssExtractPlugin.loader,
4342
'css-loader'
4443
]
44+
},
45+
{
46+
// required to prevent errors from Svelte on Webpack 5+
47+
test: /node_modules\/svelte\/.*\.mjs$/,
48+
resolve: {
49+
fullySpecified: false
50+
}
4551
}
4652
]
4753
},
@@ -51,5 +57,8 @@ module.exports = {
5157
filename: '[name].css'
5258
})
5359
],
54-
devtool: prod ? false: 'source-map'
60+
devtool: prod ? false : 'source-map',
61+
devServer: {
62+
hot: true
63+
}
5564
};

0 commit comments

Comments
 (0)