1

我创建了一个 Web 应用程序，并且正在使用 pug 文件生成我的 index.html。

pug 模板需要从 json 文件中获取数据，到目前为止，我设法使用 pug-loader 和 pug-html-loader 注入数据。

当我使用热重载（使用 webpack-hot-middleware）运行应用程序时，问题就来了。当我更改 json 文件时，应用程序不会重新加载，这真的很烦人，因为任何其他文件更改都会触发重新加载，而且我不想在每次更改 json 文件时手动重新启动应用程序。

这是我的 webpack 配置：

{
    context: '/src',
    entry: 'index.js',
    output: {
      filename: 'index.js',
      path: '/dist'
    },
    resolve: {
      extensions: ['.js', '.vue', '.scss', 'json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': config.pwd,
      }
    },
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
              scss: [
                'style-loader',
                'css-loader',
                'sass-loader',
                {
                  loader: 'sass-resources-loader',
                  options: {
                    resources: ['./src/variables.scss', './src/mixins.scss']
                  }
                }
              ]
            }
          }
        },
        {
          test: /\.scss$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader',
            {
              loader: 'sass-resources-loader',
              options: {
                resources: ['./src/variables.scss', './src/mixins.scss']
              }
            }
          ]
        },
        {
          test: /\.pug$/,
          use: [
            {
              loader: 'pug-loader',
              options: {}
            }
          ]
        }
      ]
    },
    {
        [
            new HtmlWebpackPlugin({
                template: 'index.pug',
                inject: true,
                data: require('./pug.json')
            })
        ]
    }
  }

有谁知道我如何更改 pug.json 触发热重载？

4

0 回答 0