CODEWITHSUNDEEP
webpack
Kalzone
Kalzone

Reputation: 131

webpack 2 livereload not working when I edit files

I'm trying to setup Livereload with webpack 2. Apparently, the way to achieve this is to enable HMR. So, I did this in the config

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


module.exports = {
    entry: './app/src/scripts/index.js',
    output: {
        filename: 'app.js',
        path: path.resolve('app/assets/js')
    },
    module: {
        rules: [
        {
            test: /\.scss$/, 
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ['css-loader', 'sass-loader']
            })
        }
        ]
    },
    plugins: [
        new ExtractTextPlugin('../css/style.css')
    ],
    devServer: {
        hot: true,
        compress: true,
        port: 8080,
        publicPath: 'http://localhost:8080/',
        clientLogLevel: 'none',
        contentBase: (__dirname, './'),
        watchContentBase: true,
        watchOptions: {
            aggregateTimeout: 300,
            poll: 1000
        }
    }
};

and my package.json looks like this

"scripts": {
    "watch": "webpack --progress --colors --watch",
    "build": "webpack --progress --colors",
    "deploy": "NODE_ENV=production webpack -p --progress --colors",
    "start": "webpack-dev-server"
  },

I'm trying to do npm start which serves the index.html at root on port 8080 but when I edit my scss, I the page doesn't reload. Also, I have to run webpack --watch in a separate terminal to see changes reflect when I manually reload the page in browser.

How can I fix these two issues?

Upvotes: 2

Views: 2093

Answers (1)

Michael Jungo
Michael Jungo

Reputation: 33010

To enable hot module replacement you also need to change your entry to:

entry: [
  'webpack-dev-server/client?http://localhost:8080',
  'webpack/hot/only-dev-server',
  './app/src/scripts/index.js'
],

And add the HotModuleReplacementPlugin to your plugins:

new webpack.HotModuleReplacementPlugin()

As shown in Guides - Hot Module Replacement React (just without the react-hot-loader).

Alternatively you can use the --hot CLI flag to enable it for you without having to change the config.

"start": "webpack-dev-server --hot"

Reloading after editing a .scss file is another issue, because you're using extract-text-webpack-plugin and HMR in the browser will tell you that nothing changed, although it recompiled the bundle, because it doesn't watch the output CSS file. To get around that, you can disable the extract text plugin in development with its disable option, which makes it fallback to the style-loader you configured. You would need to change it in your plugins section to:

new ExtractTextPlugin({
  filename: '../css/style.css',
  disable: process.env.NODE_ENV !== 'production'
}),

Also, I have to run webpack --watch in a separate terminal to see changes reflect when I manually reload the page in browser.

You're probably serving the files from your file system, instead of getting the ones in memory from webpack-dev-server, which does not write any file to disk. You're importing the html-webpack-plugin but not actually using it. After adding it to the plugins section webpack-dev-server will also serve the HTML file from memory when you visit http://localhost:8080/.

Upvotes: 2

Related Questions