Merge branch 'release/2.0.4' into craft-webpack

nystudio107 · Feb 5, 2020 · 1956788 · 1956788
2 parents c68de2c + 1fe90f4
commit 1956788
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 116 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,16 @@
 # nystudio107/craft Change Log
 
-## 2.0.3 - 2018.08.29
+## 2.0.4 - 2020.02.05
+### Added
+* Added `settings.babelLoaderConfig.include`
+
+### Changed
+* Removed entirely the concept of a "modern" and "legacy" build from the `webpack.dev.js`; we don't need legacy builds with `webpack-dev-server`
+
+### Fixed
+* Changed deprecated use of `cacheFirst` to `CacheFirst` in the Workbox config
+
+## 2.0.3 - 2019.08.29
 ### Added
 * Added a default `config/project.yaml` for base setup
 
@@ -9,18 +19,18 @@
 * Ignore CP and `.php` for Service Worker runtime caching
 * Remove `siteUrl`, since it is now set via Project Config
 
-## 2.0.2 - 2018.08.17
+## 2.0.2 - 2019.08.17
 ### Changed
 * Added `maxUploadFileSize` to `general.php`
 * Added `/web/dist/*` to `.gitignore`
 * Refactored the error pages out to a single channel
 * Added generic login image background
 
-## 2.0.1 - 2018.08.15
+## 2.0.1 - 2019.08.15
 ### Changed
 * Numerous template changes to get the base build working
 
-## 2.0.0 - 2018.08.14
+## 2.0.0 - 2019.08.14
 ### Changed
 * Updated to use modern webpack config
 * Updated to use Craft 3.2 as the baseline

diff --git a/README.md b/README.md
@@ -6,6 +6,7 @@ This is an alternate scaffolding package for Craft 3 CMS projects to Pixel & Ton
 
 The project is based on [Craft CMS](https://CraftCMS.com) using a unique `templates/_boilerplate` system for web/AJAX/AMP pages, and implements a number of technologies/techniques:
 
+* A base Twig templating setup as described in [An Effective Twig Base Templating Setup](https://nystudio107.com/blog/an-effective-twig-base-templating-setup)
 * [webpack](https://webpack.js.org/) is used for the build system as per [An Annotated webpack 4 Config for Frontend Web Development](https://nystudio107.com/blog/an-annotated-webpack-4-config-for-frontend-web-development)
 * [VueJS](https://vuejs.org/) is used for some of the interactive bits on the website as per 
 * [Tailwind CSS](https://tailwindcss.com/) for the site-wide CSS

diff --git a/composer.json b/composer.json
@@ -1,7 +1,7 @@
 {
   "name": "craftcms/craft",
   "description": "nystudio107 Craft 3.2 CMS scaffolding project",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "keywords": [
     "craft",
     "cms",

diff --git a/webpack.common.js b/webpack.common.js
@@ -21,6 +21,7 @@ const configureBabelLoader = (browserList) => {
     return {
         test: /\.js$/,
         exclude: settings.babelLoaderConfig.exclude,
+        include: settings.babelLoaderConfig.include,
         use: {
             loader: 'babel-loader',
             options: {

diff --git a/webpack.dev.js b/webpack.dev.js
@@ -1,6 +1,4 @@
 // webpack.dev.js - developmental builds
-const LEGACY_CONFIG = 'legacy';
-const MODERN_CONFIG = 'modern';
 
 // node modules
 const merge = require('webpack-merge');
@@ -16,7 +14,7 @@ const pkg = require('./package.json');
 const settings = require('./webpack.settings.js');
 
 // Configure the webpack-dev-server
-const configureDevServer = (buildType) => {
+const configureDevServer = () => {
     return {
         public: settings.devServerConfig.public(),
         contentBase: path.resolve(__dirname, settings.paths.templates),
@@ -38,118 +36,72 @@ const configureDevServer = (buildType) => {
 };
 
 // Configure Image loader
-const configureImageLoader = (buildType) => {
-    if (buildType === LEGACY_CONFIG) {
-        return {
-            test: /\.(png|jpe?g|gif|svg|webp)$/i,
-            use: [
-                {
-                    loader: 'file-loader',
-                    options: {
-                        name: 'img/[name].[hash].[ext]'
-                    }
-                }
-            ]
-        };
-    }
-    if (buildType === MODERN_CONFIG) {
-        return {
-            test: /\.(png|jpe?g|gif|svg|webp)$/i,
-            use: [
-                {
-                    loader: 'file-loader',
-                    options: {
-                        name: 'img/[name].[hash].[ext]'
-                    }
+const configureImageLoader = () => {
+    return {
+        test: /\.(png|jpe?g|gif|svg|webp)$/i,
+        use: [
+            {
+                loader: 'file-loader',
+                options: {
+                    name: 'img/[name].[hash].[ext]'
                 }
-            ]
-        };
-    }
+            }
+        ]
+    };
 };
 
 // Configure the Postcss loader
-const configurePostcssLoader = (buildType) => {
-    // Don't generate CSS for the legacy config in development
-    if (buildType === LEGACY_CONFIG) {
-        return {
-            test: /\.(pcss|css)$/,
-            loader: 'ignore-loader'
-        };
-    }
-    if (buildType === MODERN_CONFIG) {
-        return {
-            test: /\.(pcss|css)$/,
-            use: [
-                {
-                    loader: 'style-loader',
-                },
-                {
-                    loader: 'vue-style-loader',
-                },
-                {
-                    loader: 'css-loader',
-                    options: {
-                        importLoaders: 2,
-                        sourceMap: true
-                    }
-                },
-                {
-                    loader: 'resolve-url-loader'
-                },
-                {
-                    loader: 'postcss-loader',
-                    options: {
-                        sourceMap: true
-                    }
-                }
-            ]
-        };
-    }
-};
-
-// Development module exports
-module.exports = [
-    merge(
-        common.legacyConfig,
-        {
-            output: {
-                filename: path.join('./js', '[name]-legacy.[hash].js'),
-                publicPath: settings.devServerConfig.public() + '/',
+const configurePostcssLoader = () => {
+    return {
+        test: /\.(pcss|css)$/,
+        use: [
+            {
+                loader: 'style-loader',
             },
-            mode: 'development',
-            devtool: 'inline-source-map',
-            devServer: configureDevServer(LEGACY_CONFIG),
-            module: {
-                rules: [
-                    configurePostcssLoader(LEGACY_CONFIG),
-                    configureImageLoader(LEGACY_CONFIG),
-                ],
+            {
+                loader: 'vue-style-loader',
             },
-            plugins: [
-                new webpack.HotModuleReplacementPlugin(),
-            ],
-        }
-    ),
-    merge(
-        common.modernConfig,
-        {
-            output: {
-                filename: path.join('./js', '[name].[hash].js'),
-                publicPath: settings.devServerConfig.public() + '/',
+            {
+                loader: 'css-loader',
+                options: {
+                    url: false,
+                    importLoaders: 2,
+                    sourceMap: true
+                }
             },
-            mode: 'development',
-            devtool: 'inline-source-map',
-            devServer: configureDevServer(MODERN_CONFIG),
-            module: {
-                rules: [
-                    configurePostcssLoader(MODERN_CONFIG),
-                    configureImageLoader(MODERN_CONFIG),
-                ],
+            {
+                loader: 'resolve-url-loader'
             },
-            plugins: [
-                new webpack.HotModuleReplacementPlugin(),
-                new DashboardPlugin(),
+            {
+                loader: 'postcss-loader',
+                options: {
+                    sourceMap: true
+                }
+            }
+        ]
+    };
+};
+
+// Development module exports
+module.exports = merge(
+    common.modernConfig,
+    {
+        output: {
+            filename: path.join('./js', '[name].[hash].js'),
+            publicPath: settings.devServerConfig.public() + '/',
+        },
+        mode: 'development',
+        devtool: 'inline-source-map',
+        devServer: configureDevServer(),
+        module: {
+            rules: [
+                configurePostcssLoader(),
+                configureImageLoader(),
             ],
-        }
-    ),
-];
+        },
+        plugins: [
+            new webpack.HotModuleReplacementPlugin(),
+            new DashboardPlugin(),
+        ],
+    }
+);
diff --git a/webpack.settings.js b/webpack.settings.js
@@ -38,6 +38,8 @@ module.exports = {
         exclude: [
             /(node_modules|bower_components)/
         ],
+        include: [
+        ],
     },
     copyWebpackConfig: [
         {
@@ -110,7 +112,7 @@ module.exports = {
         swDest: "../sw.js",
         precacheManifestFilename: "js/precache-manifest.[manifestHash].js",
         importScripts: [
-            "/dist/workbox-catch-handler.js"
+            "/dist/js/workbox-catch-handler.js"
         ],
         exclude: [
             /\.(png|jpe?g|gif|svg|webp)$/i,
@@ -134,7 +136,7 @@ module.exports = {
             },
             {
                 urlPattern: /\.(?:png|jpg|jpeg|svg|webp)$/,
-                handler: "cacheFirst",
+                handler: "CacheFirst",
                 options: {
                     cacheName: "images",
                     expiration: {