webpack-dev-server不能自动刷新问题

最近在用webpack进行打包React的时候，遇到webpack-dev-server不能自动刷新的问题，输入webpack-dev-server后可以打包，但浏览器就是死活不刷新，手动刷新也没有效果，折腾了好几个小时才搞定，因为也刚接触webpack，遇到问题也蛮正常的，但是确实挺折磨人的。哈哈，话不多说，下面看具体的解决办法，当然，我用的是webpack最新版3.11.0.
1.首先得安装webpack-dev-server

npm i webpack-dev-server --save-dev

2.在项目的package.json文件里添加

  "scripts": {
    "start": "webpack-dev-server --inline --content-base"
  }

3.在入口index.html文件中引入bundle.js,必须是根目录下的。

   <script src="bundle.js" charset="utf-8"></script>

4.总结：output中配置的打包路径只在手动打包时起作用，而webpack-dev-server自动打包的开发环境下的bundle.js,路径由contentBase指定。
下面是配置源码：

const webpack = require("webpack");
const path = require("path");
const config = {
  entry: `${__dirname}/src/js/index.js`,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['react','env']
          }
        }
      }
    ]
  },
  devServer: {
  contentBase: path.join(__dirname, "./"),
  compress: true,
  port: 3000
}

};
module.exports = config;

插一句，编译jsx用的是

npm i babel-loader babel-core bable-preset-env babel-preset-react --save