这几天在进修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的运用照样摸石过河。人人晓得缘由贫苦批评示知