用webpack热重装哈巴狗

时间:2018-03-11 00:07:27

标签: node.js web webpack pug

我创建了一个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中进行更改会触发热重载?

0 个答案:

没有答案