Webpack do not reload on included file change

[Stosiu]

Hello 👋🏻
I want to use WebpackDevServer with pug-loader. My problem is that, it's not reloading the page after change in included files.
Any ideas what am I doing wrong?

My webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'eval',
  cache: true,
  debug: true,
  entry: [
    'webpack-dev-server/client?http://localhost:3000/',
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'test.bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.pug',
      title: 'Pug webiste'
    }),
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(".bower.json", [ "main" ])
    )
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: [ 'babel-loader' ],
        exclude: /(node_modules|bower_components)/,
        include: path.join(__dirname, 'src'),
        query: {
          presets: [ 'es2015' ]
        }
      }, {
        test: /\.scss$/,
        loaders: [ "style-loader", "css-loader?sourceMap", "sass-loader?sourceMap" ]
      }, {
        test: /\.pug$/,
        include: path.join(__dirname, 'src'),
        loaders: [ 'pug-html-loader' ]
      }
    ]
  },
  resolve: {
    modulesDirectories: [ "node_modules", "bower_components" ]
  }
};

server.js:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: false,
  quiet: false,
  stats: {
    colors: true,
    reasons: true
  },
  historyApiFallback: true,
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:3000/');
})

[padurets]

same problem

[mselmany]

same on me...

[thasmo]

@Stosiu, you're using pug-html-loader in your config, not pug-loader.

[govorov]

Same problem. Looks like webpack doesn't know about included files at all. I see possible solution there is to create custom loader, which will redefine include logic: inline partials into pug template and add them to watch. But it seems to be too complicated and I hope there's more simple way to accomplish that.

[OrionPro]

same problem... i use pug-loader. in Sass hot reload page, but in pug does not reload page.

[OrionPro]

if the entry point (index.js) prescribe index.pug, it will be overloaded. But it's better to do it only on Dev (not Prod).

[padurets]

my problem solved with this config

var HtmlWebpackPlugin = require("html-webpack-plugin");

var config = {
    entry: {
        ui: ['./src/categories/ui/index.js'],
    },
    output: {
        path: './public/',
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: '[name]',
        devtool: 'cheap-module-source-map',
    },
    module: {
        loaders: [{
            test: /\.pug$/,
            loader: 'pug'
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            name: 'ui',
            hash: true,
            chunks: ['ui'],
            template: './src/categories/ui/index.pug',
            filename: 'index.html'
        })
    ],
    devServer: {
        host: '0.0.0.0',
        port: 8888,
        contentBase: './public',
        lazy: false
    }
};

and this command

webpack-dev-server --watch --progress --inline

but hot reload did not get to work properly :|

[snakenstein]

We also experiencing the same problem

[xierui0423]

same issue, you can make your template a mixin and include the file then+ it (instead of including it directly), not perfect but work

[OrionPro]

@SrShark this solves the problem ? ( hot reload page if use pug )

[SrShark]

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

[OrionPro]

@SrShark i use the Module Replacement (HMR) ... (HotModuleReplacementPlugin if we about him)

[SrShark]

Finally I found the solution. it was hard! but it's working.

Webpack-dev-server - Module Replacement (HMR) don't reload PUG files changes

[SrShark]

@OrionPro i resolved it

[OrionPro]

@SrShark and than this decision differs from import '../../pages/index/index.pug'; about which have already written above? I wrote about it on 2 Jun :). I then delete this when compile development...

[OrionPro]

@SrShark that's what I see at localhost: 9000 http://prntscr.com/h6v6uj ...I have not done import 'raw-loader!./templates/index.pug', there is something wrong with this. My configuration http://prntscr.com/h6v7uc

[karneaud]

+1

[magnuky]

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]' }
}
]
},

[firestar300]

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),
}

[SrShark]

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

#75 (comment)

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