fix: updated development asset handling

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [2.0.11](https://github.com/hayes0724/shopify-packer/compare/2.0.10...2.0.11) (2021-03-29)
+
+
+### :bug: Bug Fixes
+
+* updated development asset handling ([e6ccf99](https://github.com/hayes0724/shopify-packer/commit/e6ccf99005e5f7ec05c074c1e35c56b66c5daa5a))
+
+
+
 ## [2.0.10](https://github.com/hayes0724/shopify-packer/compare/2.0.9...2.0.10) (2021-03-28)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hayes0724/shopify-packer",
-  "version": "2.0.10",
+  "version": "2.0.11",
   "bin": {
     "packer": "cli/index.js"
   },
@@ -63,7 +63,7 @@
     "minimist": "^1.2.5",
     "ora": "^5.4.0",
     "portscanner": "^2.2.0",
-    "postcss": "^8.2.8",
+    "postcss": "^7.0.35",
     "postcss-loader": "^5.2.0",
     "prettier": "^2.1.2",
     "sass": "^1.32.8",

src/config/common-paths.js

@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = {
   root: process.cwd(),
   package: (config) => path.join(config.get('root'), 'package.json'),
-  commonExcludes: [/node_modules/, /assets\/static/],
+  commonExcludes: [/node_modules/, /assets\/static/, /\.gitkeep$/],
   cache: (config) => path.join(config.get('root'), '.cache'),
   'packer.config': (config) =>
     path.join(config.get('root'), 'packer.config.js'),

src/server/asset/index.js

@@ -59,13 +59,8 @@ module.exports = class AssetServer {
         file.replace(`..${path.sep}`, '').replace(`../`, '')
       );
     }
-    if (
-      !this._isLiquidFile(file) &&
-      !isHotUpdateFile(file) &&
-      !file.includes('.js') &&
-      this._hasAssetChanged(file, info)
-    ) {
-      return this.updates.add(file.replace('../', ''));
+    if (this._isAssetFile(file) && this._hasAssetChanged(file, info)) {
+      return this.updates.add(`assets/${file}`);
     }
   }
 
@@ -104,6 +99,15 @@ module.exports = class AssetServer {
     );
   }
 
+  _isAssetFile(file) {
+    return (
+      !this._isLiquidFile(file) &&
+      !isHotUpdateFile(file) &&
+      !file.includes('.js') &&
+      !file.includes('.gitkeep')
+    );
+  }
+
   _hasAssetChanged(key, info) {
     const oldHash = this.assetHashes.get(key);
     const newHash = this._updateAssetHash(key, info);

src/webpack/config/dev.config.js

@@ -13,6 +13,7 @@ const {customConfigCheck} = require('../custom');
 const core = require('../parts/core');
 const css = require('../parts/css');
 const scss = require('../parts/scss');
+const assets = require('../parts/assets');
 const liquidStyles = require('../parts/liquid-styles');
 const copy = require('../parts/copy');
 
@@ -35,6 +36,7 @@ Object.keys(core.entry).forEach((name) => {
 module.exports = merge([
   liquidStyles,
   core,
+  assets,
   scss,
   css,
   copy,
@@ -52,22 +54,6 @@ module.exports = merge([
           exclude: config.get('commonExcludes'),
           loader: path.resolve(__dirname, '../hmr-alamo-loader.js'),
         },
-        {
-          test: /\.(eot|ttf|woff|woff2|otf)$/,
-          exclude: config.get('commonExcludes'),
-          type: 'asset',
-          generator: {
-            filename: '[name].[ext]',
-          },
-        },
-        {
-          test: /\.(png|svg|jpg|gif)$/,
-          exclude: config.get('commonExcludes'),
-          type: 'asset',
-          generator: {
-            filename: '[name].[ext]',
-          },
-        },
       ],
     },
     plugins: [

src/webpack/config/prod.config.js

@@ -18,6 +18,7 @@ config.set('files.template', getTemplateEntrypoints());
 const core = require('../parts/core');
 const css = require('../parts/css');
 const scss = require('../parts/scss');
+const assets = require('../parts/assets');
 const clean = require('../parts/clean');
 const copy = require('../parts/copy');
 const optimization = require('../parts/optimization');
@@ -33,6 +34,7 @@ core.entry = {
 const output = merge([
   liquidStyles,
   core,
+  assets,
   scss,
   css,
   clean,

src/webpack/parts/assets.js

@@ -0,0 +1,27 @@
+const PackerConfig = require('../../config');
+const config = new PackerConfig(require('../../../packer.schema'));
+
+const assets = {
+  module: {
+    rules: [
+      {
+        test: /\.(eot|ttf|woff|woff2|otf)$/,
+        exclude: config.get('commonExcludes'),
+        type: 'asset/resource',
+        generator: {
+          filename: '../[name][ext]',
+        },
+      },
+      {
+        test: /\.(png|svg|jpg|gif)$/,
+        exclude: config.get('commonExcludes'),
+        type: 'asset/resource',
+        generator: {
+          filename: '../[name][ext]',
+        },
+      },
+    ],
+  },
+};
+
+module.exports = assets;