fix: webpack 5 hot middleware

webpack-contrib/webpack-hot-middleware#391

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [2.0.8](https://github.com/hayes0724/shopify-packer/compare/2.0.7...2.0.8) (2021-03-28)
+
+
+### :bug: Bug Fixes
+
+* webpack 5 hot middleware ([5fcbe08](https://github.com/hayes0724/shopify-packer/commit/5fcbe0840fcaf430614d6046c5067c2e9c221a57))
+
+
+
 ## [2.0.7](https://github.com/hayes0724/shopify-packer/compare/2.0.6...2.0.7) (2021-03-26)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hayes0724/shopify-packer",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "bin": {
     "packer": "cli/index.js"
   },

src/server/asset/index.js

@@ -52,12 +52,18 @@ module.exports = class AssetServer {
       return this.updates.add(`assets/${file}`);
     }
     if (this._isLiquidTagFile(file) && this._hasAssetChanged(file, info)) {
-      return 'snippets/' + path.basename(file);
+      return this.updates.add(`snippets/${path.basename(file)}`);
     }
     if (this._isLiquidFile(file) && this._hasAssetChanged(file, info)) {
       return this.updates.add(file.replace('../', ''));
-    } else {
-      this._hasAssetChanged(file, info);
+    }
+    if (
+      !this._isLiquidFile(file) &&
+      !isHotUpdateFile(file) &&
+      !file.includes('.js') &&
+      this._hasAssetChanged(file, info)
+    ) {
+      return this.updates.add(file.replace('../', ''));
     }
   }
 
@@ -69,33 +75,25 @@ module.exports = class AssetServer {
   }
 
   _onAfterSync(files) {
-    /*const _syncHandler = () => {
+    const _syncHandler = () => {
       this.app.webpackHotMiddleware.publish({
         action: 'shopify_upload_finished',
         force: files.length > 0,
       });
     };
-    setTimeout(_syncHandler, parseInt(config.get('network.reload')));*/
-    this.app.webpackHotMiddleware.publish({
-      action: 'shopify_upload_finished',
-      force: files.length > 0,
-    });
-  }
-
-  _isChunk(key, chunks) {
-    return (
-      chunks.filter((chunk) => {
-        return key.indexOf(chunk.id) > -1 && !this._isLiquidStyle(key);
-      }).length > 0
-    );
+    setTimeout(_syncHandler, parseInt(config.get('network.reload')));
   }
 
   _isLiquidStyle(key) {
     return key.indexOf('styleLiquid.css.liquid') > -1;
   }
 
   _isLiquidFile(file) {
-    return file.includes('.liquid');
+    return (
+      !this._isLiquidStyle(file) &&
+      !this._isLiquidTagFile(file) &&
+      file.includes('.liquid')
+    );
   }
 
   _isLiquidTagFile(file) {
@@ -107,34 +105,14 @@ module.exports = class AssetServer {
   _hasAssetChanged(key, info) {
     const oldHash = this.assetHashes.get(key);
     const newHash = this._updateAssetHash(key, info);
-
     return oldHash !== newHash;
   }
 
-  _getAssetsToUpload(compilation) {
-    const assets = Object.entries(compilation.assets);
-    const chunks = compilation.chunks;
-    return (
-      assets
-        .filter(([key, asset]) => {
-          return (
-            asset.emitted &&
-            !this._isChunk(key, chunks) &&
-            !isHotUpdateFile(key) &&
-            this._hasAssetChanged(key, asset)
-          );
-        })
-        /* eslint-disable-next-line no-unused-vars */
-        .map(([key, asset]) => {
-          return asset.existsAt.replace(config.get('theme.dist.root'), '');
-        })
-    );
-  }
-
   _updateAssetHash(key, info) {
-    const rawSource = info.content;
-    const source = Array.isArray(rawSource) ? rawSource.join('\n') : rawSource;
-    const hash = createHash('sha256').update(source).digest('hex');
-    return this.assetHashes.set(key, hash);
+    //const rawSource = info.content;
+    //const source = Array.isArray(rawSource) ? rawSource.join('\n') : rawSource;
+    const hash = createHash('sha256').update(info.content).digest('hex');
+    this.assetHashes.set(key, hash);
+    return hash;
   }
 };

src/webpack/config/dev.config.js

@@ -11,6 +11,7 @@ const {customConfigCheck} = require('../custom');
 const core = require('../parts/core');
 const css = require('../parts/css');
 const scss = require('../parts/scss');
+const liquidStyles = require('../parts/liquid-styles');
 
 const mergeDev = customConfigCheck(config.get('merge.dev'));
 config.set('files.layout', getLayoutEntrypoints());
@@ -29,12 +30,17 @@ Object.keys(core.entry).forEach((name) => {
 });
 
 module.exports = merge([
+  liquidStyles,
   core,
   scss,
   css,
   {
     mode: 'development',
-    devtool: 'source-map',
+    devtool: false,
+    target: 'web',
+    optimization: {
+      runtimeChunk: 'single',
+    },
     module: {
       rules: [
         {

src/webpack/config/prod.config.js

@@ -11,6 +11,8 @@ process.env.NODE_ENV = 'production';
 const {customConfigCheck} = require('../custom');
 const getLayoutEntrypoints = require('../../utilities/get-layout-entrypoints');
 const getTemplateEntrypoints = require('../../utilities/get-template-entrypoints');
+const clean = require('../parts/clean');
+const copy = require('../parts/copy');
 config.set('files.layout', getLayoutEntrypoints());
 config.set('files.template', getTemplateEntrypoints());
 
@@ -19,6 +21,7 @@ const core = require('../parts/core');
 const css = require('../parts/css');
 const scss = require('../parts/scss');
 const optimization = require('../parts/optimization');
+const liquidStyles = require('../parts/liquid-styles');
 const mergeProd = customConfigCheck(config.get('merge.prod'));
 
 core.entry = {
@@ -28,9 +31,12 @@ core.entry = {
 };
 
 const output = merge([
+  liquidStyles,
   core,
   scss,
   css,
+  clean,
+  copy,
   {
     mode: 'production',
     devtool: false,

src/webpack/parts/clean.js

@@ -0,0 +1,12 @@
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+const path = require('path');
+
+const clean = {
+  plugins: [
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: [path.join(process.cwd(), 'dist/**/*')],
+    }),
+  ],
+};
+
+module.exports = clean;

src/webpack/parts/copy.js

@@ -0,0 +1,42 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const PackerConfig = require('../../config');
+const config = new PackerConfig(require('../../../packer.schema'));
+
+const copy = {
+  plugins: [
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: config.get('theme.src.assets'),
+          to: `${config.get('theme.dist.assets')}/[name][ext]`,
+        },
+        {
+          from: config.get('theme.src.layout'),
+          to: config.get('theme.dist.layout'),
+        },
+        {
+          from: config.get('theme.src.config'),
+          to: config.get('theme.dist.config'),
+        },
+        {
+          from: config.get('theme.src.locales'),
+          to: config.get('theme.dist.locales'),
+        },
+        {
+          from: config.get('theme.src.snippets'),
+          to: config.get('theme.dist.snippets'),
+        },
+        {
+          from: config.get('theme.src.templates'),
+          to: config.get('theme.dist.templates'),
+        },
+        {
+          from: config.get('theme.src.sections'),
+          to: config.get('theme.dist.sections'),
+        },
+      ],
+    }),
+  ],
+};
+
+module.exports = copy;

src/webpack/parts/core.js

@@ -1,6 +1,4 @@
 const path = require('path');
-const {CleanWebpackPlugin} = require('clean-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 const PackerConfig = require('../../config');
 const config = new PackerConfig(require('../../../packer.schema'));
 
@@ -26,66 +24,17 @@ const core = {
         exclude: [/(css|scss|sass)\.liquid$/, ...config.get('commonExcludes')],
         type: 'asset/resource',
         generator: {
-          filename: '../[path][name].[ext]',
-        },
-      },
-      {
-        test: /(css|scss|sass)\.liquid$/,
-        exclude: config.get('commonExcludes'),
-        type: 'asset/resource',
-        generator: {
-          filename: (pathData) => {
-            return `${pathData.runtime.split('.')[0]}.${
-              path.basename(pathData.filename).split('.')[0]
-            }.styleLiquid.css.liquid`;
-          },
+          filename: '[path][name].[ext]',
         },
       },
       {
         test: /\.(ts|js)$/,
         loader: 'babel-loader',
+        exclude: config.get('commonExcludes'),
       },
     ],
   },
-
-  plugins: [
-    new CleanWebpackPlugin({
-      cleanOnceBeforeBuildPatterns: [path.join(process.cwd(), 'dist/**/*')],
-    }),
-
-    new CopyWebpackPlugin({
-      patterns: [
-        {
-          from: config.get('theme.src.assets'),
-          to: `${config.get('theme.dist.assets')}/[name][ext]`,
-        },
-        {
-          from: config.get('theme.src.layout'),
-          to: config.get('theme.dist.layout'),
-        },
-        {
-          from: config.get('theme.src.config'),
-          to: config.get('theme.dist.config'),
-        },
-        {
-          from: config.get('theme.src.locales'),
-          to: config.get('theme.dist.locales'),
-        },
-        {
-          from: config.get('theme.src.snippets'),
-          to: config.get('theme.dist.snippets'),
-        },
-        {
-          from: config.get('theme.src.templates'),
-          to: config.get('theme.dist.templates'),
-        },
-        {
-          from: config.get('theme.src.sections'),
-          to: config.get('theme.dist.sections'),
-        },
-      ],
-    }),
-  ],
+  plugins: [],
 };
 
 module.exports = core;

src/webpack/parts/liquid-styles.js

@@ -0,0 +1,43 @@
+const isDev = process.env.NODE_ENV !== 'production';
+const PackerConfig = require('../../config');
+const config = new PackerConfig(require('../../../packer.schema'));
+const path = require('path');
+
+const liquidStyles = {
+  module: {
+    rules: [
+      {
+        test: /(css|scss|sass)\.liquid$/,
+        exclude: config.get('commonExcludes'),
+        type: 'asset/resource',
+        generator: {
+          filename: (pathData) => {
+            return `${pathData.runtime.split('.')[0]}.${
+              path.basename(pathData.filename).split('.')[0]
+            }.styleLiquid.css.liquid`;
+          },
+        },
+      },
+    ],
+  },
+};
+
+if (!isDev) {
+  liquidStyles.module.rules[0].generator = {
+    filename: (pathData) => {
+      return `${pathData.runtime.split('.')[0]}.${
+        path.basename(pathData.filename).split('.')[0]
+      }.styleLiquid.css.liquid`;
+    },
+  };
+} else {
+  liquidStyles.module.rules[0].generator = {
+    filename: (pathData) => {
+      return `layout.${
+        path.basename(pathData.filename).split('.')[0]
+      }.styleLiquid.css.liquid`;
+    },
+  };
+}
+
+module.exports = liquidStyles;