webpack devServer 無法自動刷新瀏覽器，但是可以自動編譯

DataPipeline 發(fā)布于2019-08-26 18:27 / 3608人閱讀

摘要：后面設(shè)置的輸出路徑都以此為基礎(chǔ)用于文件路徑查找抽離文件自動生成文件熱模塊更新把注釋掉之后，可以加載成功文件和自動刷新了。估計(jì)是因?yàn)榘盐募汲殡x到這里了，所以在下，引用和沒有效。只是估計(jì)，新手上路，目前對的使用還是摸石過河。

這幾天在學(xué)習(xí)webpack使用中，發(fā)現(xiàn)的一個(gè)問題，記錄一下
問題：
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插件需要的參數(shù)
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（用于開發(fā)，方便閱讀）、production（用于上線，壓縮優(yōu)化）、none（啥都不設(shè)置，給機(jī)器看的）*/
    entry : {//入口
        "common" : "./src/page/common/index.js",
        "index" : "./src/page/index/index.js",
        "login" : "./src/page/login/index.js"
        
    },
    
    devServer : {//告訴開發(fā)服務(wù)器(dev server)，在哪里查找文件
        contentBase : path.join(__dirname, "dist"),
        inline : true
    },
    output : {//輸出
        filename : "js/[name].js",
        path : path.resolve(__dirname,"dist"),//絕對路徑，當(dāng)前目錄下的dist。后面設(shè)置的輸出路徑都以此為基礎(chǔ)
    },
    module : {//loader
        rules : [
            {
                test : /.css$/,
                use : ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader",
                    publicPath : "../"http://用于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  
    估計(jì)是因?yàn)榘裫s文件都抽離到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文件和自動刷新了。估計(jì)是因?yàn)榘裫s文件都抽離到vendors~common~index~login.js這里了，所以在devserver下，index.html引用index.js和common.js沒有效。
只是估計(jì)，新手上路，目前對webpack的使用還是摸石過河。大家知道原因麻煩評論告知