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 的使用还是摸石过河。大家知道原因麻烦评论告知