11

My project has this structure: 

\root    
   \webpack.config.js
   \public
     \ index.html
     \ ...
     \ css
     \ directives
     \ views   
     \ dist (webpack output)
       \app.js
       \ index.html
       \ app.js.map   
       \ style.css
       \ style.css.map

when i use webpack-dev-server I launch it from /root and it loads the app. But, when i change a sass file or html file it does not reload. What is wrong with the webpack config?

Command to launch webpack: 

$ cd root
$ webpack-dev-server

Webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

const webConfig = {
  entry: path.join(__dirname, 'public', 'js', 'app'),
  output: {
    path: path.join(__dirname, 'public', 'dist'),
    filename: 'app.js'
  },
  resolve: {
    modules: [__dirname, 'node_modules'],
    extensions: ['.js'],
    enforceExtension: false,
  },
  devtool: 'source-map',
  devServer:{
    contentBase: 'public/',
    publicPath: 'public/'
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          loader: 'css-loader?modules,localIdentName=[name]__[local]--[hash:base64:5]!sass-loader'
        }),
        exclude: /node_modules/
      },
      {
        test: /\.html$/,
        loader: "raw-loader" // loaders: ['raw-loader'] is also perfectly acceptable.
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({filename: 'style.css', allChunks: true}),
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

module.exports = webConfig;
William Falcon
  • 9,813
  • 14
  • 67
  • 110

4 Answers4

8

https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9

“inline” option adds “Live reloading” for the entire page. “hot” option enables “Hot Module Reloading” that tries to reload just the component that’s changed (instead of the entire page). If we pass both options, then, when the source changes, the webpack-dev-server will try to HMR first. If that doesn’t work, then it will reload the entire page.

Try adding this to your webpack.config file:

devServer:{
    contentBase: 'public/',
    publicPath: 'public/',
    inline: true,
    hot: true,
  },

If you want, you can also call a script from your package.json file. Some thing like that:

...
scripts: {
   "watch": "webpack-dev-server --progress --colors --hot --inline",
}
...
Pablo Darde
  • 5,844
  • 10
  • 37
  • 55
  • As of 01/18/2018 my webpack hot reloading suddently stopped working. I had to manually add inline and hot to my devServer config within webpack.config! TY for this answer! – Gavin Thomas Jan 18 '18 at 19:04
8

https://webpack.js.org/blog/2020-10-10-webpack-5-release/

With webpack 5, you will want to use the option watchFiles:

devServer: {
  watchFiles: ["./public/*"], // string [string] object [object]
  port: 3000,
  open: true,
  hot: true,
},

View the official docs about the watchFiles option.

RATIU5
  • 368
  • 6
  • 20
1

just add the option watchContentBase: true, in your devServer config

stop the current activity and reload the script

devServer: {
        contentBase: path.join(__dirname, 'public'),
        port: 9000,
        open:true,
        liveReload: true,
        watchContentBase: true,
      },
Dagi
  • 11
  • 1
0

if you have HtmlWebpackPlugin, try to remove it, weback-dev-server/webpack serve can pick the html file under ./public automatically.

Weijing Jay Lin
  • 2,991
  • 6
  • 33
  • 53