webpack-dev-server not reloading on html or sass change

angularjs, javascript, npm, webpack

Solution

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",
}
...

Problem

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; ```

Original source