webpack - Webpack Shell Plugin Next 构建命令 ThemeKit HRM & TailwindCSS

Question

我需要帮助设置使用 Webpack 和 Shopify ThemeKit 的热模块重新加载。使用Webpack Shell 插件接下来我将尝试执行以下步骤。

1. 启动 Webpack 并观察变化
2. 构建 TailwindCSS
3. 部署主题
4. 打开主题
5. 观看主题更改

这是我当前的设置，它不会触发文件更改的重建并保存热模块重新加载。

包.json

"scripts": {
    "start": "NODE_ENV=development webpack --watch"
},

webpack.config.js

// Run Shell commmands during Webpack operations
if (mode === 'development') {
    module.exports.plugins.push(
      new WebpackShellPluginNext({
        onBuildStart:{
          scripts: ['echo -- Webpack build started '],
          blocking: true,
          parallel: false
        },
        onBuildError:{
            scripts: ['echo -- ☠️ Aw snap, Webpack build failed...'],
        }, 
        onBuildEnd:{
          scripts: [
              'echo -- Webpack build complete ✓',
              'echo -- Building TailwindCSS...',
              'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid',
              'echo -- Deploying to theme ✈️',
              'shopify-themekit deploy',
              'echo -- Deployment competed ✓',
              'shopify-themekit open',
              'shopify-themekit watch'],
          blocking: true,
          parallel: false
        }
      })
    )
  }

当前设置可以正确构建和部署，但在更改和保存文件时不会重新加载。我尝试了 Webpack Shell Plugin Next 中的各种操作顺序和 api，但我坚持要找到正确的组合。

这是完整存储库的链接：Shopify ThemeKit with Webpack 4

标签： webpackwebpack-4