Skip to content

Commit 8e360e0

Browse files
SoldierCorpSoldierCorp
committed
UPDATE: Webpack 4 to 5
1 parent 47c5618 commit 8e360e0

File tree

5 files changed

+5437
-2926
lines changed

5 files changed

+5437
-2926
lines changed

‎build/utils.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ exports.pages = function (env, folder = '') {
33
const HtmlWebpackPlugin = require('html-webpack-plugin')
44
const fs = require('fs')
55
const path = require('path')
6-
const viewsFolder = path.resolve(__dirname, `../src/views/${rootPagesFolderName}/${folder}`)
6+
const viewsFolder = path.join(__dirname, `../src/views/${rootPagesFolderName}/${folder}`)
77

88
var pages = []
99

@@ -14,6 +14,7 @@ exports.pages = function (env, folder = '') {
1414
const viewName = view.split('.')[0];
1515
const fileName = folder === '' ? `${viewName}/index.html` : `${folder}/${viewName}/index.html`;
1616
const options = {
17+
minify: !env === 'development',
1718
filename: fileName,
1819
template: `views/${rootPagesFolderName}/${folder}/${view}`,
1920
inject: true

‎build/webpack.config.js

Lines changed: 42 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,45 @@
11
// Libraries
2+
require('../postcss.config');
3+
24
const path = require('path');
35
const webpack = require('webpack');
46
const HtmlWebpackPlugin = require('html-webpack-plugin');
57
const WebpackNotifierPlugin = require('webpack-notifier');
68
const CopyWebpackPlugin = require('copy-webpack-plugin');
79
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
810
const TerserPlugin = require('terser-webpack-plugin');
11+
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
12+
13+
const ASSET_PATH = process.env.ASSET_PATH || '/';
14+
915

1016
// Files
1117
const utils = require('./utils')
12-
const plugins = require('../postcss.config');
1318

1419
// Configuration
1520
module.exports = env => {
1621

1722
return {
18-
context: path.resolve(__dirname, '../src'),
23+
context: path.join(__dirname, '../src'),
1924
entry: {
20-
app: './app.js'
25+
app: path.join(__dirname, '../src/app.js'),
2126
},
2227
output: {
23-
path: path.resolve(__dirname, '../dist'),
24-
filename: 'assets/js/[name].[hash:7].bundle.js'
28+
publicPath: ASSET_PATH,
29+
path: path.join(__dirname, '../dist'),
30+
filename: 'assets/js/[name].[contenthash:7].bundle.js'
2531
},
2632
devServer: {
27-
contentBase: path.resolve(__dirname, '../src'),
33+
contentBase: path.join(__dirname, '../src'),
34+
compress: true,
35+
open: true
2836
},
2937
resolve: {
3038
extensions: ['.js'],
3139
alias: {
32-
source: path.resolve(__dirname, '../src'), // Relative path of src
33-
images: path.resolve(__dirname, '../src/assets/images'), // Relative path of images
34-
fonts: path.resolve(__dirname, '../src/assets/fonts'), // Relative path of fonts
40+
source: path.join(__dirname, '../src'), // Relative path of src
41+
images: path.join(__dirname, '../src/assets/images'), // Relative path of images
42+
fonts: path.join(__dirname, '../src/assets/fonts'), // Relative path of fonts
3543
}
3644
},
3745

@@ -41,12 +49,12 @@ module.exports = env => {
4149
module: {
4250
rules: [
4351
{
44-
test: /\.js$/,
52+
test: /\.m?js$/,
4553
exclude: [/node_modules/],
4654
use: [
4755
{
4856
loader: 'babel-loader',
49-
options: { presets: ['es2015'] }
57+
options: { presets: ['@babel/preset-env'] }
5058
}
5159
]
5260
},
@@ -69,7 +77,7 @@ module.exports = env => {
6977
test: /\.scss$/,
7078
use: [
7179
env === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, // creates style nodes from JS strings
72-
{ loader: 'css-loader', options: { importLoaders: 1, minimize: true, sourceMap: true, colormin: false } }, // translates CSS into CommonJS
80+
{ loader: 'css-loader', options: { importLoaders: 1, sourceMap: true } }, // translates CSS into CommonJS
7381
'postcss-loader',
7482
'sass-loader', // compiles Sass to CSS
7583
],
@@ -87,41 +95,44 @@ module.exports = env => {
8795
loader: 'url-loader',
8896
options: {
8997
limit: 3000,
90-
name: 'assets/images/[name].[hash:7].[ext]'
98+
name: 'assets/images/[name].[contenthash:7].[ext]'
9199
}
92100
},
93101
{
94102
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
95103
loader: 'url-loader',
96104
options: {
97-
name: 'assets/fonts/[name].[hash:7].[ext]'
105+
limit: 5000,
106+
name: 'assets/fonts/[name].[contenthash:7].[ext]'
98107
}
99108
},
100-
{
109+
/* {
101110
test: /\.(mp4)(\?.*)?$/,
102111
loader: 'url-loader',
103112
options: {
104113
limit: 10000,
105-
name: 'assets/videos/[name].[hash:7].[ext]'
114+
name: 'assets/videos/[name].[contenthash:7].[ext]'
106115
}
107-
}
116+
} */
108117
]
109118
},
110119
optimization: {
120+
minimize: true,
111121
minimizer: [
112122
new TerserPlugin({
113123
cache: true,
114124
parallel: true,
115125
sourceMap: true,
116126
}),
127+
new OptimizeCSSAssetsPlugin({})
117128
],
118129
splitChunks: {
119130
cacheGroups: {
120131
default: false,
121132
vendors: false,
122133
// vendor chunk
123134
vendor: {
124-
filename: 'assets/js/vendor.[hash:7].bundle.js',
135+
filename: 'assets/js/vendor.[chunkhash:7].bundle.js',
125136
// sync + async chunks
126137
chunks: 'all',
127138
// import file path containing node_modules
@@ -132,30 +143,33 @@ module.exports = env => {
132143
},
133144

134145
plugins: [
135-
new CopyWebpackPlugin([
136-
{ from: '../manifest.json', to: 'manifest.json' },
137-
{ from: '../browserconfig.xml', to: 'browserconfig.xml' },
138-
{ from: 'assets/images/favicons/android-chrome-192x192.png', to: 'assets/images/android-chrome-192x192.png' },
139-
{ from: 'assets/images/favicons/android-chrome-256x256.png', to: 'assets/images/android-chrome-256x256.png' },
140-
{ from: 'assets/images/favicons/mstile-150x150.png', to: 'assets/images/mstile-150x150.png' }
141-
]),
146+
new CopyWebpackPlugin({
147+
patterns: [
148+
{ from: '../manifest.json', to: 'manifest.json' },
149+
{ from: '../browserconfig.xml', to: 'browserconfig.xml' },
150+
{ from: 'assets/images/favicons/android-chrome-192x192.png', to: 'assets/images/android-chrome-192x192.png' },
151+
{ from: 'assets/images/favicons/android-chrome-256x256.png', to: 'assets/images/android-chrome-256x256.png' },
152+
{ from: 'assets/images/favicons/mstile-150x150.png', to: 'assets/images/mstile-150x150.png' }
153+
]
154+
}),
142155
new MiniCssExtractPlugin({
143-
filename: 'assets/css/[name].[hash:7].bundle.css',
156+
filename: 'assets/css/[name].[chunkhash:7].bundle.css',
144157
chunkFilename: '[id].css',
145158
}),
146159

147160
/*
148161
Pages
149162
*/
150163

151-
// // Desktop page
164+
// Desktop page
152165
new HtmlWebpackPlugin({
166+
minify: !env === 'development',
153167
filename: 'index.html',
154168
template: 'views/index.pug',
155169
inject: true
156170
}),
157171

158-
...utils.pages(env),
172+
...utils.pages(env), // env, public path, parent folder
159173
...utils.pages(env, 'blog'),
160174

161175
new webpack.ProvidePlugin({

‎package.json

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,48 +7,46 @@
77
"license": "MIT",
88
"scripts": {
99
"test": "echo \"Error: no test specified\" && exit 1",
10-
"build": "rimraf dist && webpack --config ./build/webpack.config.js --env.NODE_ENV=development --mode=development --progress",
11-
"dev-network": "webpack-dev-server --config ./build/webpack.config.js --env.NODE_ENV=development --mode=development --progress --open --host 0.0.0.0",
12-
"dev": "webpack-dev-server --config ./build/webpack.config.js -env.NODE_ENV=development --mode=development --progress --open",
13-
"prod": "rimraf dist && webpack --config ./build/webpack.config.js --env.NODE_ENV=production --mode=production -p --progress "
10+
"build": "rimraf dist && webpack --config ./build/webpack.config.js --mode development --progress",
11+
"dev-network": "webpack server --config ./build/webpack.config.js --mode=development --progress --open --host 0.0.0.0",
12+
"dev": "webpack serve --config ./build/webpack.config.js --mode development --progress",
13+
"prod": "rimraf dist && webpack --config ./build/webpack.config.js --mode production -p --progress "
1414
},
1515
"devDependencies": {
16-
"autoprefixer": "^8.2.0",
17-
"babel-core": "^6.26.0",
18-
"babel-loader": "^7.1.4",
19-
"babel-plugin-module-resolver": "^3.1.0",
20-
"babel-preset-env": "^1.6.1",
16+
"autoprefixer": "^10.0.1",
17+
"babel-core": "^6.26.3",
18+
"babel-loader": "^8.1.0",
19+
"babel-plugin-module-resolver": "^4.0.0",
20+
"babel-preset-env": "^1.7.0",
2121
"babel-preset-es2015": "^6.24.1",
22-
"copy-webpack-plugin": "^4.5.1",
23-
"css-loader": "^0.28.11",
24-
"eslint": "^4.19.1",
22+
"copy-webpack-plugin": "^6.2.1",
23+
"css-loader": "^4.3.0",
24+
"eslint": "^7.11.0",
2525
"extract-text-webpack-plugin": "^3.0.2",
26-
"file-loader": "^1.1.11",
27-
"html-webpack-plugin": "^3.1.0",
28-
"mini-css-extract-plugin": "^0.5.0",
29-
"node-sass": "^4.13.1",
30-
"postcss": "^6.0.21",
26+
"file-loader": "^6.1.1",
27+
"html-webpack-plugin": "^4.5.0",
28+
"mini-css-extract-plugin": "^1.0.0",
29+
"node-sass": "^4.14.1",
30+
"optimize-css-assets-webpack-plugin": "^5.0.4",
31+
"postcss": "^8.1.1",
3132
"postcss-cssnext": "^3.1.0",
32-
"postcss-import": "^11.1.0",
33-
"postcss-loader": "^2.1.3",
34-
"postcss-modules": "^1.1.0",
35-
"pug": "^2.0.3",
33+
"postcss-import": "^12.0.1",
34+
"postcss-loader": "^4.0.4",
35+
"postcss-modules": "^3.2.2",
36+
"pug": "^3.0.0",
3637
"pug-loader": "^2.4.0",
37-
"rimraf": "^2.6.3",
38-
"sass-loader": "^6.0.7",
39-
"style-loader": "^0.20.3",
40-
"terser-webpack-plugin": "^1.2.2",
41-
"tslib": "^1.9.0",
42-
"url-loader": "^1.0.1",
43-
"webpack": "^4.29.5",
44-
"webpack-cli": "^3.2.3",
45-
"webpack-dev-server": "^3.2.0",
46-
"webpack-notifier": "^1.6.0"
38+
"rimraf": "^3.0.2",
39+
"sass-loader": "^10.0.3",
40+
"style-loader": "^2.0.0",
41+
"terser-webpack-plugin": "^4.2.3",
42+
"url-loader": "^4.1.1",
43+
"webpack": "^5.0.0",
44+
"webpack-cli": "^4.0.0",
45+
"webpack-dev-server": "^3.11.0",
46+
"webpack-notifier": "^1.8.0"
4747
},
4848
"dependencies": {
49-
"gsap": "^1.20.4",
50-
"jquery": "^3.5.0",
51-
"normalize.css": "^8.0.0",
52-
"scrollmagic": "^2.0.5"
49+
"jquery": "^3.5.1",
50+
"normalize.css": "^8.0.1"
5351
}
5452
}

‎src/views/layouts/master.pug

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,16 @@ html(lang='en')
3535

3636

3737
//- Favicons
38-
link(rel='apple-touch-icon', sizes='180x180', href=require('images/favicons/apple-touch-icon.png'))
39-
link(rel='icon', type='image/png', sizes='32x32', href=require('images/favicons/favicon-32x32.png'))
40-
link(rel='icon', type='image/png', sizes='16x16', href=require('images/favicons/favicon-16x16.png'))
41-
link(rel='shortcut icon', href=require('images/favicons/favicon.ico'))
38+
link(rel='apple-touch-icon', sizes='180x180', href=require('images/favicons/apple-touch-icon.png').default)
39+
link(rel='icon', type='image/png', sizes='32x32', href=require('images/favicons/favicon-32x32.png').default)
40+
link(rel='icon', type='image/png', sizes='16x16', href=require('images/favicons/favicon-16x16.png').default)
41+
link(rel='shortcut icon', href=require('images/favicons/favicon.ico').default)
4242

4343
//- Preload fonts
44-
link(type='font/woff', href=require('source/assets/fonts/Quicksand-Bold.woff'), rel='prefetch', as='font', crossorigin)
45-
link(type='font/woff', href=require('source/assets/fonts/Quicksand-Medium.woff'), rel='prefetch', as='font', crossorigin)
46-
link(type='font/woff', href=require('source/assets/fonts/Quicksand-Regular.woff'), rel='prefetch', as='font', crossorigin)
47-
link(type='font/woff', href=require('source/assets/fonts/Quicksand-Light.woff'), rel='prefetch', as='font', crossorigin)
44+
link(type='font/woff', href=require('source/assets/fonts/Quicksand-Bold.woff').default, rel='preload', as='font', crossorigin)
45+
link(type='font/woff', href=require('source/assets/fonts/Quicksand-Medium.woff').default, rel='preload', as='font', crossorigin)
46+
link(type='font/woff', href=require('source/assets/fonts/Quicksand-Regular.woff').default, rel='preload', as='font', crossorigin)
47+
link(type='font/woff', href=require('source/assets/fonts/Quicksand-Light.woff').default, rel='preload', as='font', crossorigin)
4848

4949
//- Title
5050
block title

0 commit comments

Comments
 (0)