CODEWITHSUNDEEP
webpackwebpack-dev-serverwebpack-2
Jordan Sykes
Jordan Sykes

Reputation: 71

Webpack 2 devServer options knocks out live reload?

I have recently started using Webpack 2 with the dev server which is working fine. As soon as I add in the options for webpack dev server, it does what its supposed to do, only showing minimal feedback in the command line but stops live refresh? Here is the options I am adding to manipulate webpack's feedback :

devServer: {
    stats: 'minimal'
},

And for context, here is my webpack config:

import webpack from 'webpack'
import path from 'path'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

const nodeModules     = path.resolve(__dirname, 'node_modules')

const config = {

    entry: './src/js/index.js',
    output: {
        path: path.join(__dirname, "site/assets"),
        filename: 'index.js',
        publicPath: '/site/assets'
    },

    devServer: {
        stats: 'minimal'
    },

    module: {
        rules: [
            {
                test      : /\.js$/,
                loader    : 'babel-loader',
                exclude   : [nodeModules]
            },
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },

            {
                test      : /\.scss$/,
                use       : ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                }),
                exclude   : [nodeModules]
            },
            {
                test      : /\.(png|jpg)$/,
                loader    : 'url-loader'
            }
        ]
    },

    plugins: [
        new ExtractTextPlugin('main.css')
    ]
};

export default config

And here is my package.json with the scripts in:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "watch": "webpack --progress --colors --watch",
    "build": "webpack --progress --colors",
    "deploy": "NODE_ENV=production webpack -p --progress --colors",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "base-64": "^0.1.0",
    "bourbon": "^4.3.2",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "^2.0.0-beta", 
    "file-loader": "^0.10.0",
    "fractions-2": "^2.1.7",
    "json-loader": "^0.5.4",
    "lodash": "^4.17.4",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack-dev-server": "^2.4.1"
  }
}

I cant figure out why this option would knockout the live reload? Any insight appreciated!

Upvotes: 0

Views: 598

Answers (1)

Jordan Sykes
Jordan Sykes

Reputation: 71

I found the easiest way to achieve what I wanted was to adapt my start script in my package.json to this :

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

Then in my webpack config I kept the minimal stats option in and now all works as intended.

Upvotes: 1

Related Questions