Merge pull request #47 from skuadron45/master

Promote asset/resource rather than url-loader

Author: SoldierCorp

build/utils.js

@@ -1,4 +1,12 @@
-exports.pages = function (env, folder = '') {
+function isDevMode(mode) {
+  return mode === "development"
+}
+exports.isDevMode = isDevMode;
+exports.getMode = function (env) {
+  env = env || {};
+  return env.mode || 'production'
+}
+exports.pages = function (mode, folder = '') {
   const rootPagesFolderName = 'pages'
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const fs = require('fs')
@@ -14,13 +22,13 @@ 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',
+      minify: !isDevMode(mode),
       filename: fileName,
       template: `views/${rootPagesFolderName}/${folder}/${view}`,
       inject: true
     }
 
-    if (env === 'development') {
+    if (isDevMode(mode)) {
       options.minify = {
         removeComments: true,
         collapseWhitespace: true,

build/webpack.config.js

@@ -12,16 +12,18 @@ const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 
 const ASSET_PATH = process.env.ASSET_PATH || '/'
 
-
 // Files
 const utils = require('./utils')
 
 // Configuration
-module.exports = env => {
+module.exports = (env) => {
+
+  // Get default mode from env
+  const MODE = env.mode || 'production';
 
   return {
+    mode: MODE,
     target: 'web',
-
     context: path.join(__dirname, '../src'),
     entry: {
       app: path.join(__dirname, '../src/app.js'),
@@ -63,7 +65,7 @@ module.exports = env => {
         {
           test: /\.css$/,
           use: [
-            env === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
+            utils.isDevMode(MODE) ? 'style-loader' : MiniCssExtractPlugin.loader,
             {
               loader: 'css-loader',
               options: {
@@ -76,7 +78,7 @@ module.exports = env => {
         {
           test: /\.scss$/,
           use: [
-            env === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, // creates style nodes from JS strings
+            utils.isDevMode(MODE) ? 'style-loader' : MiniCssExtractPlugin.loader, // creates style nodes from JS strings
             { loader: 'css-loader', options: { importLoaders: 1, sourceMap: true } }, // translates CSS into CommonJS
             'postcss-loader',
             'sass-loader', // compiles Sass to CSS
@@ -92,28 +94,25 @@ module.exports = env => {
         },
         {
           test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
-          loader: 'url-loader',
-          options: {
-            limit: 3000,
-            name: 'assets/images/[name].[contenthash:7].[ext]'
+          type: 'asset/resource',
+          generator: {
+            filename: 'assets/images/[name].[contenthash:7][ext]'
           }
         },
         {
           test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-          loader: 'url-loader',
-          options: {
-            limit: 5000,
-            name: 'assets/fonts/[name].[contenthash:7].[ext]'
+          type: 'asset/resource',
+          generator: {
+            filename: 'assets/fonts/[name].[contenthash:7][ext]'
           }
         },
-        /* {
+        /*{
           test: /\.(mp4)(\?.*)?$/,
-          loader: 'url-loader',
-          options: {
-            limit: 10000,
-            name: 'assets/videos/[name].[contenthash:7].[ext]'
-          }
-        } */
+          type: 'asset/resource',
+          generator: {
+            filename: 'assets/videos/[name].[contenthash:7][ext]'
+          },
+        }*/
       ]
     },
     experiments: {
@@ -162,16 +161,17 @@ module.exports = env => {
         Pages
       */
 
-      // Desktop page
+      // Homepage
       new HtmlWebpackPlugin({
-        minify: !env === 'development',
+        minify: !utils.isDevMode(MODE),
         filename: 'index.html',
         template: 'views/index.pug',
         inject: 'body',
       }),
 
-      ...utils.pages(env), // env, public path, parent folder
-      ...utils.pages(env, 'blog'),
+      // Other pages
+      ...utils.pages(MODE), // mode
+      ...utils.pages(MODE, 'blog'), // mode, folder name under pages
 
       new webpack.ProvidePlugin({
         $: 'jquery',

package.json

@@ -12,10 +12,10 @@
   "license": "MIT",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "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 "
+    "build": "rimraf dist && webpack --env mode=development --config ./build/webpack.config.js --progress",
+    "dev-network": "webpack serve --env mode=development --config ./build/webpack.config.js --progress --open --host 0.0.0.0 --disable-host-check",
+    "dev": "webpack serve --env mode=development --config ./build/webpack.config.js --progress",
+    "prod": "rimraf dist && webpack --env mode=production --config ./build/webpack.config.js --progress "
   },
   "resolutions": {
     "upath": "1.1.1"

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').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)
+    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'))
 
     //- Preload fonts
-    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)
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Bold.woff'), rel='preload', as='font', crossorigin)
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Medium.woff'), rel='preload', as='font', crossorigin)
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Regular.woff'), rel='preload', as='font', crossorigin)
+    link(type='font/woff', href=require('source/assets/fonts/Quicksand-Light.woff'), rel='preload', as='font', crossorigin)
 
     //- Title
     block title