pug-loader: Webpack do not reload on included file change

I remember when I handled this problem, and now I come back to share my new improvement.

https://github.com/pugjs/pug-loader/issues/75#issuecomment-342122079

I SOLVED whit this npm module. webpack-livereload-plugin

Config Webpack 3.x using babel

import LiveReloadPlugin from 'webpack-livereload-plugin'

plugins: [
  new LiveReloadPlugin({
    appendScriptTag: true
  })
]

Managed to get it worked without importing pug in js. Use this: https://github.com/jantimon/html-webpack-harddisk-plugin

var plugins = { HtmlWebpackPlugin: require(‘html-webpack-plugin’), HtmlWebpackHarddiskPlugin: require(‘html-webpack-harddisk-plugin’), ExtractTextPlugin: require(‘extract-text-webpack-plugin’), UglifyJsPlugin: require(‘uglifyjs-webpack-plugin’), PurifyCSSPlugin: require(‘purifycss-webpack’) }

plugins: [ new plugins.HtmlWebpackPlugin({ template : ‘src/pug/index.pug’, filename: “…/index.html”, inject : true, alwaysWriteToDisk: true }), new plugins.HtmlWebpackHarddiskPlugin(), new plugins.ExtractTextPlugin(“[name].css”), new plugins.UglifyJsPlugin(), new webpack.LoaderOptionsPlugin({ minimize: true }), ],

devServer: { contentBase: path.join(__dirname, “dist”), compress: true, port: 9000, // hot: true, watchContentBase: true, watchOptions: { ignored: /node_modules/ } }

module: { rules: [ { test: /.pug$/, // loaders: [ ‘raw-loader’, ‘pug-html-loader’ ] loaders: [‘pug-loader’ ] }, { test: /.js$/, loader: ‘babel-loader?cacheDirectory=true’, exclude: /node_modules/, }, { test: /.scss$/, use: [‘css-hot-loader’].concat(plugins.ExtractTextPlugin.extract({ use: [ ‘css-loader’, { loader: ‘sass-loader’, options: { includePaths: [‘./’, ‘node_modules’] } } ], fallback: “style-loader” })) }, { test: /.(png|jpe?g|gif|svg)$/, loader: ‘file-loader’, options: { name: ‘img/[name].[ext]’ } } ] },

I have the same problem. HTML files are not updated with Webpack Dev Server when I modified a PUG template.

let webpackBase = {
  devtool: config.dev ? 'source-map' : false,
  entry: config.entry,
  output: {
    path: config.assetsPath,
    publicPath: config.assetsPublicPath,
    filename: config.dev ? '[name].js' : '[name].[chunkhash:8].min.js',
  },
  devServer: config.devServer,
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: {
          loader: 'pug-loader',
          options: {
            pretty: true,
            self: true,
          },
        },
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        include: root,
        enforce: 'pre',
        use: [
          {
            loader: 'babel-loader',
            options: {
              babelrc: true,
            },
          },
          {
            loader: 'eslint-loader',
          },
        ],
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [...cssLoaders, 'resolve-url-loader'],
        }),
      },
      {
        test: /\.(sass|scss)$/,
        use: ExtractTextPlugin.extract({
          use: [...cssLoaders, 'sass-loader'],
        }),
      },
      {
        test: /\.(woff2?|woff|eot|ttf|otf|mp3|wav)(\?.*)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: './fonts/',
          },
        },
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65,
              },
              pngquant: {
                quality: '65-90',
                speed: 4,
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75,
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
    new CopyWebpackPlugin([
      {
        from: 'src/js/vendor_async/',
        to: 'js/vendor_async/',
      },
      {
        from: 'src/fonts/',
        to: 'fonts/',
      },
      {
        from: 'src/img/bg-sample/',
        to: 'img/bg-sample/',
      },
      {
        from: 'src/img/sample/',
        to: 'img/sample/',
      },
    ]),
    new SvgStore(
      path.resolve(__dirname, './../src/img/icons/*.svg'),
      path.resolve(__dirname, './../dist/assets/icons/'),
      {
        name: 'icons',
        prefix: 'icon-',
        chunk: 'svg',
        svgoOptions: {
          plugins: [
            {
              removeTitle: true,
            },
          ],
        },
      }
    ),
  ].concat(htmlRender),
}

@OrionPro if you use the Module Replacement (HMR) No, don’t resolve that problem. But if you use only DevServer, it is reloading perfect.