1

I created a web application and i'm generating my index.html with a pug file.

The pug template needs to get data from a json file, and so far I managed to inject the data with both pug-loader and pug-html-loader.

The problem comes when I run the application with hot-reloading (using webpack-hot-middleware). the application dosen't reload when I change the json file, which is really annoying because any other file change triggers a reload, and I don't want to restart the application manually everytime I change the json file.

this is my webpack configuration:

{
    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')
            })
        ]
    }
  }

does any one know how i can make a change in pug.json trigger a hot reload?

Graham
  • 7,431
  • 18
  • 59
  • 84
תמיר רביבי
  • 21
  • 2
  • Is your application reloading when you make changes to your scss files? – Gibin Ealias Mar 12 '18 at 06:32
  • yes, I actually made it work by writing my own pug-loader. the problem was that the pug-loader did not support giving a path to a json file for injecting to the pug function, so he did not add the file as a dependency. – תמיר רביבי Mar 15 '18 at 17:00

0 Answers0