為 Shopify 開發設置 webpack/HMR

Question

我正在嘗試設置 webpack 的開發服務器和 HMR 以與 Shopify 主題開發一起使用。 在運行服務器並打開本地 IP 時，我從 Shopify 的 DNS 提供商 CloudFlare 收到此錯誤。

如何正確設置 webpack 以向我的代理 Shopify 商店（mystore.myshopify.com url）注入熱更改（css/JS）？

我的 webpack 配置如下：

const path = require("path");
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
  mode: "development",
  devServer: {
    contentBase: false,
    hot: true,    
    https: true,
    proxy: {
      "**": { 
        target: "http://mystore.myshopify.com", 
        secure: false
      }
    },    
  },  
  entry: "./src/scripts/index.js",
  output: { 
    filename: "./app.js",
    path: path.resolve(__dirname, "dist")
  },
  plugins: [

  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          //postcss here (autoprefixer, babel etc)
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ],
  },
};

Answer 1

我提出的使用 webpack 和 shopify 進行熱重載的解決方案。

在您的 package.json 中，您將需要以下腳本

1. 監視更改的 webpack 構建腳本。 我還添加了一個進度參數，以便我可以看到它何時更新。 這將監視您的 /src 文件夾以進行更改。

   "webpack:build": "cross-env NODE_ENV=development webpack --watch --progress",

2. 一個 shopify 主題服務腳本，它從 /dist 文件夾上傳主題文件，該文件夾是 webpack 構建的 output。

   "shopify:serve": "cd dist && shopify 主題服務"

3. 您可以使用以下方法將這兩個腳本鏈接在一起。

   “部署：服務”：“運行-p -sr webpack：構建 shopify：服務”

因此，webpack 構建腳本會監聽 /src 代碼中的更改。 當主要更改時，它會將 output 重新構建到 shopify 主題服務正在偵聽的 /dist 文件夾中。 更新后，shopify 會上傳更改。

瞧。

如果你想玩，這里是這個實現的 repo - https://github.com/Sambuxc/9119-shopify-theme/

在撰寫本文時，我的開發版本是：節點 18.7.0 Npm 8.15.0 Shopify Cli 2.21.0

祝你好運，我希望這對未來的開發人員有所幫助。

如果您遇到任何問題，請與我聯系。