为 Shopify 开发设置 webpack/HMR

Question

我正在尝试设置 webpack 的开发服务器和 HMR 以与 Shopify 主题开发配合使用。当运行服务器并打开本地 IP 时，我从 Shopify 的 DNS 提供商 CloudFlare 收到此错误。

如何正确设置 webpack 以将热更改 (css/JS) 注入我的代理 Shopify 商店（mystore.myshopify.com url）？

我的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”：“跨环境NODE_ENV =开发webpack --watch --progress”，

2. shopify 主题服务脚本，从 /dist 文件夹上传主题文件，该文件夹是 webpack 构建的输出。

   "shopify:serve": "cd dist && shopify 主题服务"

3. 您可以使用以下命令将这两个脚本链接在一起。

   “部署：服务”：“运行-p -sr webpack：构建shopify：服务”

因此，webpack 构建脚本会监听 /src 代码中的更改。当更改为主时，它会将输出重新构建到 Shopify 主题服务正在侦听的 /dist 文件夹。更新后，shopify 会上传更改。

瞧。

如果您想尝试一下，这里是此实现的存储库 - https://github.com/Sambuxc/9119-shopify-theme/

在撰写本文时，我的开发版本是： 节点18.7.0 Npm 8.15.0 Shopify CLI 2.21.0

祝你好运，我希望这对未来的开发人员有所帮助。

如果您遇到任何问题，请联系我。