Skip to content
This repository was archived by the owner on Sep 4, 2023. It is now read-only.

Commit a185212

Browse files
ivarprudnikovivarprudnikov
committed
Webpack 5
1 parent 3f4bce2 commit a185212

File tree

9 files changed

+1270
-3041
lines changed

9 files changed

+1270
-3041
lines changed

‎README.md

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
Static html pages with Webpack 4
1+
Static html pages with Webpack 5
22
================================
33

44
[![Build Status](https://travis-ci.com/ivarprudnikov/webpack-static-html-pages.svg?branch=master)](https://travis-ci.com/ivarprudnikov/webpack-static-html-pages)
@@ -9,11 +9,13 @@ Static html pages with Webpack 4
99
[> PREVIEW LIVE](https://ivarprudnikov.github.io/webpack-static-html-pages/)
1010
--------------------------------
1111

12-
This is a forkable example of static site (plain html/css/javascript)
12+
This is a forkable example of a static website (plain html/css/javascript)
1313
assembled with webpack. You could also use this repository as a template when creating a new one.
1414

1515
Article explaining how this example was created: https://www.ivarprudnikov.com/static-website-multiple-html-pages-using-webpack-plus-github-example/
1616

17+
* Webpack4 implementation can still be found on a separate branch [`webpack4`](https://github.com/ivarprudnikov/webpack-static-html-pages/tree/webpack4)
18+
1719
## Prerequisites
1820

1921
- [Install `node` (comes with `npm`)](https://nodejs.org/). Suggested version expressed in [.nvmrc](./.nvmrc) file.
@@ -25,11 +27,6 @@ Article explaining how this example was created: https://www.ivarprudnikov.com/s
2527
- `npm test` - run minimal tests (eg: lint javascript files)
2628
- `npm run cy:run` - run Cypress functional/browser/e2e tests. Works only when running website locally (`npm start` or `npm run preview`)
2729

28-
### Where are generated files?
29-
30-
In `development` mode `webpack` does not write generated files to disk, in order to change it
31-
switch `devServer.writeToDisk` to `true` in [webpack.dev.js](./webpack.dev.js)
32-
3330
## Production
3431

3532
- `npm run build` to prepare `html`, `css`, `js` files in `dist/` directory

‎package-lock.json

Lines changed: 1183 additions & 2962 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
{
22
"name": "webpack-static-html-pages",
3-
"version": "1.0.0",
4-
"description": "Example of a static website assembled by using webpack v4",
3+
"version": "2.0.0",
4+
"repository": {
5+
"type": "git",
6+
"url" : "https://github.com/ivarprudnikov/webpack-static-html-pages"
7+
},
8+
"description": "Example of a static website assembled by using webpack v5",
59
"keywords": [
610
"webpack",
711
"static",
@@ -14,9 +18,9 @@
1418
"normalize.css": "^8.0.1"
1519
},
1620
"scripts": {
17-
"start": "webpack serve --config webpack.dev.js --mode development",
21+
"start": "webpack serve --config webpack.dev.js",
1822
"start:dist": "http-server dist --port ${PORT:-8080}",
19-
"build": "webpack --config webpack.prod.js --mode production",
23+
"build": "webpack --config webpack.prod.js",
2024
"preview": "npm run build && npm run start:dist",
2125
"test": "standard",
2226
"cy:run": "cypress run"
@@ -26,21 +30,18 @@
2630
"@babel/core": "^7.14.0",
2731
"@babel/preset-env": "^7.14.1",
2832
"babel-loader": "^8.2.2",
29-
"clean-webpack-plugin": "^3.0.0",
3033
"css-loader": "^5.2.4",
34+
"css-minimizer-webpack-plugin": "^2.0.0",
3135
"cypress": "^7.2.0",
32-
"file-loader": "^6.2.0",
33-
"html-loader": "^1.3.2",
34-
"html-webpack-plugin": "^4.5.2",
36+
"html-loader": "^2.1.2",
37+
"html-webpack-plugin": "^5.3.1",
3538
"http-server": "^0.12.3",
3639
"mini-css-extract-plugin": "^1.6.0",
37-
"optimize-css-assets-webpack-plugin": "^5.0.4",
3840
"standard": "^16.0.3",
3941
"style-loader": "^2.0.0",
40-
"terser-webpack-plugin": "^4.2.3",
41-
"url-loader": "^4.1.1",
42-
"webpack": "^4.46.0",
43-
"webpack-cli": "^4.6.0",
42+
"terser-webpack-plugin": "^5.1.1",
43+
"webpack": "^5.36.2",
44+
"webpack-cli": "^4.7.0",
4445
"webpack-dev-server": "^3.11.2"
4546
},
4647
"standard": {

‎src/page-about/tmpl.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</head>
1313
<body>
1414

15-
<%= require('html-loader!../partials/nav.html') %>
15+
<%= require('../partials/nav.html?raw') %>
1616

1717
<h1 class="page-title">
1818
<i class="fas fa-user-secret"></i>
@@ -21,9 +21,11 @@ <h1 class="page-title">
2121

2222
<div style="text-align: center">
2323
<img class="img-src-uses-require" src="<%= require('../img/unicorn.jpg') %>" width="200">
24-
<%= require('html-loader!../partials/images.html') %>
24+
25+
<!-- uses a specific "template" resourceQuery (webpack config) which will load a file like a esModule by default, hence ".default" -->
26+
<%= require('../partials/images.html?template').default %>
2527
</div>
2628

27-
<%= require('html-loader!../partials/footer.html') %>
29+
<%= require('../partials/footer.html?raw') %>
2830
</body>
2931
</html>

‎src/page-contacts/tmpl.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@
1212
</head>
1313
<body>
1414

15-
<%= require('html-loader!../partials/nav.html') %>
15+
<%= require('../partials/nav.html?raw') %>
1616

1717
<h1 class="page-title">
1818
<i class="fas fa-map-marked-alt"></i>
1919
CONTACTS
2020
</h1>
2121

22-
<%= require('html-loader!../partials/footer.html') %>
22+
<%= require('../partials/footer.html?raw') %>
2323
</body>
2424
</html>

‎src/page-index/tmpl.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@
1212
</head>
1313
<body>
1414

15-
<%= require('html-loader!../partials/nav.html') %>
15+
<!-- intercepted by a resourceQuery in the webpack config -->
16+
<%= require('../partials/nav.html?raw') %>
1617

1718
<h1 class="page-title">
1819
<i class="fab fa-fort-awesome"></i>
1920
HOME
2021
</h1>
2122

22-
<%= require('html-loader!../partials/footer.html') %>
23+
<%= require('../partials/footer.html?raw') %>
2324
</body>
2425
</html>

‎src/partials/images.html

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,2 @@
1-
<!--
2-
html-loader is parsing this file https://webpack.js.org/loaders/html-loader/#usage
3-
but is related to how image is resolved with url-loader which must not output es6 module for it to work
4-
-->
1+
<!-- html-loader ishould be parsing this file https://webpack.js.org/loaders/html-loader/#usage -->
52
<img class="img-from-html-loader" src="../img/unicorn.jpg" width="200">

‎webpack.dev.js

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
22

33
module.exports = {
44

5+
// https://webpack.js.org/configuration/mode/
6+
mode: 'development',
7+
58
// This option controls if and how source maps are generated.
69
// https://webpack.js.org/configuration/devtool/
710
devtool: 'eval-cheap-module-source-map',
@@ -23,35 +26,35 @@ module.exports = {
2326
module: {
2427
rules: [
2528
{
26-
test: /\.js$/i,
29+
// https://webpack.js.org/loaders/babel-loader/#root
30+
test: /\.m?js$/i,
2731
exclude: /node_modules/,
28-
loader: 'babel-loader',
29-
options: {
30-
presets: ['@babel/preset-env']
32+
use: {
33+
loader: 'babel-loader',
34+
options: {
35+
presets: ['@babel/preset-env']
36+
}
3137
}
3238
},
3339
{
40+
// https://webpack.js.org/loaders/css-loader/#root
3441
test: /\.css$/i,
35-
use: [
36-
'style-loader',
37-
'css-loader'
38-
// Please note we are not running postcss here
39-
]
42+
use: ['style-loader', 'css-loader']
4043
},
4144
{
42-
// Load all images as base64 encoding if they are smaller than 8192 bytes
45+
// https://webpack.js.org/guides/asset-modules/#resource-assets
4346
test: /\.(png|jpe?g|gif|svg)$/i,
44-
use: [
45-
{
46-
loader: 'url-loader',
47-
options: {
48-
// On development we want to see where the file is coming from, hence we preserve the [path]
49-
name: '[path][name].[ext]?hash=[hash:20]',
50-
esModule: false,
51-
limit: 8192
52-
}
53-
}
54-
]
47+
type: 'asset/resource'
48+
},
49+
{
50+
// https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax
51+
resourceQuery: /raw/,
52+
type: 'asset/source'
53+
},
54+
{
55+
// https://webpack.js.org/loaders/html-loader/#usage
56+
resourceQuery: /template/,
57+
loader: 'html-loader'
5558
}
5659
]
5760
},

‎webpack.prod.js

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
const path = require('path')
22

3-
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
43
const HtmlWebpackPlugin = require('html-webpack-plugin')
54
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
6-
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
5+
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
76
const TerserPlugin = require('terser-webpack-plugin')
87

98
const buildPath = path.resolve(__dirname, 'dist')
109

1110
module.exports = {
1211

12+
// https://webpack.js.org/configuration/mode/
13+
mode: 'production',
14+
1315
// This option controls if and how source maps are generated.
1416
// https://webpack.js.org/configuration/devtool/
1517
devtool: 'source-map',
@@ -24,63 +26,68 @@ module.exports = {
2426
// how to write the compiled files to disk
2527
// https://webpack.js.org/concepts/output/
2628
output: {
27-
filename: '[name].[hash:20].js',
28-
path: buildPath
29+
filename: '[name].[contenthash].js',
30+
path: buildPath,
31+
clean: true
2932
},
3033

3134
// https://webpack.js.org/concepts/loaders/
3235
module: {
3336
rules: [
3437
{
35-
test: /\.js$/i,
38+
// https://webpack.js.org/loaders/babel-loader/#root
39+
test: /\.m?js$/i,
3640
exclude: /node_modules/,
37-
loader: 'babel-loader',
38-
options: {
39-
presets: ['@babel/preset-env']
41+
use: {
42+
loader: 'babel-loader',
43+
options: {
44+
presets: ['@babel/preset-env']
45+
}
4046
}
4147
},
4248
{
49+
// https://webpack.js.org/loaders/css-loader/#root
4350
test: /\.css$/i,
4451
use: [
4552
MiniCssExtractPlugin.loader,
4653
'css-loader'
4754
]
4855
},
4956
{
50-
// Load all images as base64 encoding if they are smaller than 8192 bytes
57+
// https://webpack.js.org/guides/asset-modules/#resource-assets
5158
test: /\.(png|jpe?g|gif|svg)$/i,
52-
use: [
53-
{
54-
loader: 'url-loader',
55-
options: {
56-
name: '[name].[hash:20].[ext]',
57-
esModule: false,
58-
limit: 8192
59-
}
60-
}
61-
]
59+
type: 'asset/resource'
60+
},
61+
{
62+
// https://webpack.js.org/guides/asset-modules/#replacing-inline-loader-syntax
63+
resourceQuery: /raw/,
64+
type: 'asset/source'
65+
},
66+
{
67+
// https://webpack.js.org/loaders/html-loader/#usage
68+
resourceQuery: /template/,
69+
loader: 'html-loader'
6270
}
6371
]
6472
},
6573

6674
// https://webpack.js.org/concepts/plugins/
6775
plugins: [
68-
new CleanWebpackPlugin(), // cleans output.path by default
6976
new HtmlWebpackPlugin({
7077
template: './src/page-index/tmpl.html',
71-
inject: 'body',
78+
inject: true,
7279
chunks: ['index'],
7380
filename: 'index.html'
7481
}),
7582
new HtmlWebpackPlugin({
7683
template: './src/page-about/tmpl.html',
77-
inject: 'body',
84+
inject: true,
7885
chunks: ['about'],
7986
filename: 'about.html'
8087
}),
8188
new HtmlWebpackPlugin({
8289
template: './src/page-contacts/tmpl.html',
83-
inject: 'body',
90+
inject: true,
8491
chunks: ['contacts'],
8592
filename: 'contacts.html'
8693
}),
@@ -94,12 +101,12 @@ module.exports = {
94101
optimization: {
95102
minimize: true,
96103
minimizer: [
104+
// https://webpack.js.org/plugins/terser-webpack-plugin/
97105
new TerserPlugin({
98-
cache: true,
99-
parallel: true,
100-
sourceMap: true
106+
parallel: true
101107
}),
102-
new OptimizeCssAssetsPlugin({})
108+
// https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production
109+
new CssMinimizerPlugin()
103110
]
104111
}
105112
}

0 commit comments

Comments
 (0)