webpack devServer 无法自动刷新浏览器，但是可以自动编译

这几天在学习webpack使用中，发现的一个问题，记录一下
问题：
1.webpack devServer 无法自动刷新浏览器，但是可以自动编译
2.无法加载js文件（不使用devServer情况下，可以正常加载js）

webpack.config.js的配置如下：

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 封装自动生成html插件需要的参数
var getHtmlConfig = function(name){
    return {
            filename : 'view/' + name + '.html',
            template : './src/view/' + name + '.html',
            inject : 'true',
            hash : 'true',
            chunks :['common',name]
    };
}

module.exports = {
    mode : 'development',/*三种打包模式，development（用于开发，方便阅读）、production（用于上线，压缩优化）、none（啥都不设置，给机器看的）*/
    entry : {//入口
        'common' : './src/page/common/index.js',
        'index' : './src/page/index/index.js',
        'login' : './src/page/login/index.js'
        
    },
    
    devServer : {//告诉开发服务器(dev server)，在哪里查找文件
        contentBase : path.join(__dirname, 'dist'),
        inline : true
    },
    output : {//输出
        filename : 'js/[name].js',
        path : path.resolve(__dirname,'dist'),//绝对路径，当前目录下的dist。后面设置的输出路径都以此为基础
    },
    module : {//loader
        rules : [
            {
                test : /\.css$/,
                use : ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader",
                    publicPath : '../'//用于CSS文件url路径查找：url(../resource/xxx.jpg)
                })
            },
            {
                test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/,
                use: 
                    {
                        loader : 'url-loader',
                        options : {
                            limit : 10000,
                            name : 'resource/[name]-[hash].[ext]'
                        }
                    }
            }
        ]
    },
    plugins : [
        // 抽离css文件
        new ExtractTextPlugin({
            filename: "css/bundle.css",
            disable: false,
            allChunks: true
        }),
        // 自动生成html文件
        new HtmlWebpackPlugin(getHtmlConfig("index")),
        new HtmlWebpackPlugin(getHtmlConfig("login")),
        //热模块更新
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    /* 把optimization注释掉之后，devserver可以加载成功js文件和自动刷新了。命令行打包显示：
    js/vendors~common~index~login.js    345 KiB  vendors~common~index~login  [emitted]  vendors~common~index~login  
    估计是因为把js文件都抽离到vendors~common~index~login.js这里了，所以在devserver下，index.html引用index.js和common.js没有效 */
//     optimization: {
// 
//         splitChunks: {
//           chunks: 'initial',
//           minSize: 30000,
//           maxSize: 0,
//           minChunks: 1,
//           maxAsyncRequests: 5,
//           maxInitialRequests: 3,
//           automaticNameDelimiter: '~',
//           name: true,
//           cacheGroups: {
//             vendors: {
//               test: /[\\/]node_modules[\\/]/,
//               priority: -10
//             },
//             commons: { 
//                     test: /page\//,
//                     name: 'page',
//                     priority: 10,
//                     enforce: true
//             }
//           }
//         }
//     }
    
};

命令行打包后显示信息：

解决：
把optimization注释掉之后，devserver可以加载成功js文件和自动刷新了。估计是因为把js文件都抽离到vendors~common~index~login.js这里了，所以在devserver下，index.html引用index.js和common.js没有效。
只是估计，新手上路，目前对webpack的使用还是摸石过河。大家知道原因麻烦评论告知