[英]Setting up webpack/HMR for Shopify development
我正在尝试设置 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',
],
},
],
},
};
我提出的使用 webpack 和 shopify 进行热重载的解决方案。
在您的 package.json 中,您将需要以下脚本
监视更改的 webpack 构建脚本。 我还添加了一个进度参数,以便我可以看到它何时更新。 这将监视您的 /src 文件夹以进行更改。
"webpack:build": "cross-env NODE_ENV=development webpack --watch --progress",
一个 shopify 主题服务脚本,它从 /dist 文件夹上传主题文件,该文件夹是 webpack 构建的 output。
"shopify:serve": "cd dist && shopify 主题服务"
您可以使用以下方法将这两个脚本链接在一起。
“部署:服务”:“运行-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
祝你好运,我希望这对未来的开发人员有所帮助。
如果您遇到任何问题,请与我联系。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.