Merge pull request #35 from SoldierCorp/webpack-5

SoldierCorp · web-flow · commit 2c918799916e · 2021-06-02T09:12:44.000-05:00
Webpack 5 is now supported! #20
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,6 @@
 {
   "presets": [
-    "env"
+    "@babel/preset-env"
   ],
   "plugins": [
     [
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-12.22.1
+14.17.0
diff --git a/README.md b/README.md
@@ -1,5 +1,11 @@
 Webpack project starter with Pug, Sass/Stylus, jQuery, VanillaJS, Babel and Yarn
-===================
+
+---
+
+## Now working with Webpack 5 🎉
+You can still use Webpack 4 by downloading [this branch](https://github.com/SoldierCorp/webpack-starter-pug-sass-es6-jquery/tree/webpack-4)
+
+---
 
 The purpose of this Webpack Starter is to allow people to create websites without any framework/library like React, Angular, Vue but only using simple but powerful technologies to build quality websites.
 
diff --git a/build/utils.js b/build/utils.js
@@ -3,7 +3,7 @@ exports.pages = function (env, folder = '') {
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const fs = require('fs')
   const path = require('path')
-  const viewsFolder = path.resolve(__dirname, `../src/views/${rootPagesFolderName}/${folder}`)
+  const viewsFolder = path.join(__dirname, `../src/views/${rootPagesFolderName}/${folder}`)
 
   var pages = []
 
@@ -14,6 +14,7 @@ exports.pages = function (env, folder = '') {
     const viewName = view.split('.')[0];
     const fileName = folder === '' ? `${viewName}/index.html` : `${folder}/${viewName}/index.html`;
     const options = {
+      minify: !env === 'development',
       filename: fileName,
       template: `views/${rootPagesFolderName}/${folder}/${view}`,
       inject: true
diff --git a/build/webpack.config.js b/build/webpack.config.js
@@ -1,37 +1,45 @@
 // Libraries
+require('../postcss.config');
+
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackNotifierPlugin = require('webpack-notifier');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+const ASSET_PATH = process.env.ASSET_PATH || '/';
+
 
 // Files
 const utils = require('./utils')
-const plugins = require('../postcss.config');
 
 // Configuration
 module.exports = env => {
 
   return {
-    context: path.resolve(__dirname, '../src'),
+    context: path.join(__dirname, '../src'),
     entry: {
-      app: './app.js'
+      app: path.join(__dirname, '../src/app.js'),
     },
     output: {
-      path: path.resolve(__dirname, '../dist'),
-      filename: 'assets/js/[name].[hash:7].bundle.js'
+      publicPath: ASSET_PATH,
+      path: path.join(__dirname, '../dist'),
+      filename: 'assets/js/[name].[contenthash:7].bundle.js'
     },
     devServer: {
-      contentBase: path.resolve(__dirname, '../src'),
+      contentBase: path.join(__dirname, '../src'),
+      compress: true,
+      open: true
     },
     resolve: {
       extensions: ['.js'],
       alias: {
-        source: path.resolve(__dirname, '../src'), // Relative path of src
-        images: path.resolve(__dirname, '../src/assets/images'), // Relative path of images
-        fonts: path.resolve(__dirname, '../src/assets/fonts'), // Relative path of fonts
+        source: path.join(__dirname, '../src'), // Relative path of src
+        images: path.join(__dirname, '../src/assets/images'), // Relative path of images
+        fonts: path.join(__dirname, '../src/assets/fonts'), // Relative path of fonts
       }
     },
 
@@ -41,12 +49,12 @@ module.exports = env => {
     module: {
       rules: [
         {
-          test: /\.js$/,
+          test: /\.m?js$/,
           exclude: [/node_modules/],
           use: [
             {
               loader: 'babel-loader',
-              options: { presets: ['es2015'] }
+              options: { presets: ['@babel/preset-env'] }
             }
           ]
         },
@@ -69,7 +77,7 @@ module.exports = env => {
           test: /\.scss$/,
           use: [
             env === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, // creates style nodes from JS strings
-            { loader: 'css-loader', options: { importLoaders: 1, minimize: true, sourceMap: true, colormin: false } }, // translates CSS into CommonJS
+            { loader: 'css-loader', options: { importLoaders: 1, sourceMap: true } }, // translates CSS into CommonJS
             'postcss-loader',
             'sass-loader', // compiles Sass to CSS
           ],
@@ -87,41 +95,42 @@ module.exports = env => {
           loader: 'url-loader',
           options: {
             limit: 3000,
-            name: 'assets/images/[name].[hash:7].[ext]'
+            name: 'assets/images/[name].[contenthash:7].[ext]'
           }
         },
         {
           test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
           loader: 'url-loader',
           options: {
-            name: 'assets/fonts/[name].[hash:7].[ext]'
+            limit: 5000,
+            name: 'assets/fonts/[name].[contenthash:7].[ext]'
           }
         },
-        {
+        /* {
           test: /\.(mp4)(\?.*)?$/,
           loader: 'url-loader',
           options: {
             limit: 10000,
-            name: 'assets/videos/[name].[hash:7].[ext]'
+            name: 'assets/videos/[name].[contenthash:7].[ext]'
           }
-        }
+        } */
       ]
     },
     optimization: {
+      minimize: true,
       minimizer: [
         new TerserPlugin({
-          cache: true,
           parallel: true,
-          sourceMap: true,
         }),
+        new OptimizeCSSAssetsPlugin({})
       ],
       splitChunks: {
         cacheGroups: {
           default: false,
           vendors: false,
           // vendor chunk
           vendor: {
-            filename: 'assets/js/vendor.[hash:7].bundle.js',
+            filename: 'assets/js/vendor.[chunkhash:7].bundle.js',
             // sync + async chunks
             chunks: 'all',
             // import file path containing node_modules
@@ -132,30 +141,33 @@ module.exports = env => {
     },
 
     plugins: [
-      new CopyWebpackPlugin([
-        { from: '../manifest.json', to: 'manifest.json' },
-        { from: '../browserconfig.xml', to: 'browserconfig.xml' },
-        { from: 'assets/images/favicons/android-chrome-192x192.png', to: 'assets/images/android-chrome-192x192.png' },
-        { from: 'assets/images/favicons/android-chrome-256x256.png', to: 'assets/images/android-chrome-256x256.png' },
-        { from: 'assets/images/favicons/mstile-150x150.png', to: 'assets/images/mstile-150x150.png' }
-      ]),
+      new CopyWebpackPlugin({
+        patterns: [
+          { from: '../manifest.json', to: 'manifest.json' },
+          { from: '../browserconfig.xml', to: 'browserconfig.xml' },
+          { from: 'assets/images/favicons/android-chrome-192x192.png', to: 'assets/images/android-chrome-192x192.png' },
+          { from: 'assets/images/favicons/android-chrome-256x256.png', to: 'assets/images/android-chrome-256x256.png' },
+          { from: 'assets/images/favicons/mstile-150x150.png', to: 'assets/images/mstile-150x150.png' }
+        ]
+      }),
       new MiniCssExtractPlugin({
-        filename: 'assets/css/[name].[hash:7].bundle.css',
+        filename: 'assets/css/[name].[chunkhash:7].bundle.css',
         chunkFilename: '[id].css',
       }),
 
       /*
         Pages
       */
 
-      // // Desktop page
+      // Desktop page
       new HtmlWebpackPlugin({
+        minify: !env === 'development',
         filename: 'index.html',
         template: 'views/index.pug',
         inject: true
       }),
 
-      ...utils.pages(env),
+      ...utils.pages(env), // env, public path, parent folder
       ...utils.pages(env, 'blog'),
 
       new webpack.ProvidePlugin({
diff --git a/package.json b/package.json
@@ -12,51 +12,52 @@
   "license": "MIT",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rimraf dist && webpack --config ./build/webpack.config.js --env.NODE_ENV=development --mode=development --progress",
-    "dev-network": "webpack-dev-server --config ./build/webpack.config.js --env.NODE_ENV=development --mode=development --progress --open --host 0.0.0.0",
-    "dev": "webpack-dev-server --config ./build/webpack.config.js -env.NODE_ENV=development --mode=development --progress --open",
-    "prod": "rimraf dist && webpack --config ./build/webpack.config.js --env.NODE_ENV=production --mode=production -p --progress "
+    "build": "rimraf dist && webpack --config ./build/webpack.config.js --mode development --progress",
+    "dev-network": "webpack server --config ./build/webpack.config.js --mode=development --progress --open --host 0.0.0.0",
+    "dev": "webpack serve --config ./build/webpack.config.js --mode development --progress",
+    "prod": "rimraf dist && webpack --config ./build/webpack.config.js --mode production --progress "
   },
   "resolutions": {
-    "upath": "1.1.0"
+    "upath": "1.1.1"
   },
   "devDependencies": {
-    "autoprefixer": "^8.2.0",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-module-resolver": "^3.1.0",
-    "babel-preset-env": "^1.6.1",
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.4",
+    "autoprefixer": "^10.2.6",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-module-resolver": "^4.1.0",
     "babel-preset-es2015": "^6.24.1",
-    "copy-webpack-plugin": "^4.5.1",
-    "css-loader": "^0.28.11",
-    "eslint": "^4.19.1",
+    "copy-webpack-plugin": "^9.0.0",
+    "css-loader": "^5.2.6",
+    "eslint": "^7.27.0",
     "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^3.1.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.13.1",
-    "postcss": "^6.0.21",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "mini-css-extract-plugin": "^1.6.0",
+    "node-sass": "^6.0.0",
+    "optimize-css-assets-webpack-plugin": "^6.0.0",
+    "postcss": "^8.3.0",
     "postcss-cssnext": "^3.1.0",
-    "postcss-import": "^11.1.0",
-    "postcss-loader": "^2.1.3",
-    "postcss-modules": "^1.1.0",
-    "pug": "^3.0.1",
+    "postcss-import": "^14.0.2",
+    "postcss-loader": "^5.3.0",
+    "postcss-modules": "^4.0.0",
+    "pug": "^3.0.2",
     "pug-loader": "^2.4.0",
-    "rimraf": "^2.6.3",
-    "sass-loader": "^6.0.7",
-    "style-loader": "^0.20.3",
-    "terser-webpack-plugin": "^1.2.2",
-    "tslib": "^1.9.0",
-    "url-loader": "^1.0.1",
-    "webpack": "^4.29.5",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.2.0",
-    "webpack-notifier": "^1.6.0"
+    "rimraf": "^3.0.2",
+    "sass-loader": "^12.0.0",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-notifier": "^1.13.0"
   },
   "dependencies": {
-    "gsap": "^3.6.0",
-    "jquery": "^3.5.0",
-    "normalize.css": "^8.0.0",
-    "scrollmagic": "^2.0.5"
-  }
+    "jquery": "^3.6.0",
+    "normalize.css": "^8.0.1"
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }
diff --git a/src/views/index.pug b/src/views/index.pug
@@ -12,6 +12,6 @@ block content
   // Menu
   +menu('home')
 
-  //- Desktop page
+  //- Index page
   section.page.home__page
     h1.page__title # Index page
diff --git a/src/views/layouts/master.pug b/src/views/layouts/master.pug
@@ -35,16 +35,16 @@ html(lang='en')
 
 
     //- Favicons
-    link(rel='apple-touch-icon', sizes='180x180', href=require('images/favicons/apple-touch-icon.png'))
-    link(rel='icon', type='image/png', sizes='32x32', href=require('images/favicons/favicon-32x32.png'))
-    link(rel='icon', type='image/png', sizes='16x16', href=require('images/favicons/favicon-16x16.png'))
-    link(rel='shortcut icon', href=require('images/favicons/favicon.ico'))
+    link(rel='apple-touch-icon', sizes='180x180', href=require('images/favicons/apple-touch-icon.png').default)
+    link(rel='icon', type='image/png', sizes='32x32', href=require('images/favicons/favicon-32x32.png').default)
+    link(rel='icon', type='image/png', sizes='16x16', href=require('images/favicons/favicon-16x16.png').default)
+    link(rel='shortcut icon', href=require('images/favicons/favicon.ico').default)
 
     //- Preload fonts
-    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Bold.woff'), rel='prefetch', as='font', crossorigin)
-    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Medium.woff'), rel='prefetch', as='font', crossorigin)
-    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Regular.woff'), rel='prefetch', as='font', crossorigin)
-    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Light.woff'), rel='prefetch', as='font', crossorigin)
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Bold.woff').default, rel='preload', as='font', crossorigin)
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Medium.woff').default, rel='preload', as='font', crossorigin)
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Regular.woff').default, rel='preload', as='font', crossorigin)
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Light.woff').default, rel='preload', as='font', crossorigin)
 
     //- Title
     block title
diff --git a/src/views/pages/blog.pug b/src/views/pages/blog.pug
@@ -17,7 +17,7 @@ block content
   // Menu
   +menu('blog')
 
-  //- Desktop page
+  //- BLog page
   section.page.blog__page
     h1.page__title # Blog page
 
diff --git a/src/views/pages/blog/example-post.pug b/src/views/pages/blog/example-post.pug
@@ -17,6 +17,6 @@ block content
   // Menu
   +menu('blog-post')
 
-  //- Desktop page
+  //- BLog post page
   section.page.blogpost__page
     h1.page__title # Blog post page
diff --git a/src/views/pages/contact.pug b/src/views/pages/contact.pug
@@ -17,6 +17,6 @@ block content
   // Menu
   +menu('contact')
 
-  //- Desktop page
+  //- Contact page
   section.page.contact__page
     h1.page__title # Contact page
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"presets": [`
`3`		`- "env"`
	`3`	`+ "@babel/preset-env"`
`4`	`4`	`],`
`5`	`5`	`"plugins": [`
`6`	`6`	`[`