成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

DataPipeline / 3616人閱讀

摘要：后面設置的輸出路徑都以此為基礎用于文件路徑查找抽離文件自動生成文件熱模塊更新把注釋掉之后，可以加載成功文件和自動刷新了。估計是因為把文件都抽離到這里了，所以在下，引用和沒有效。只是估計，新手上路，目前對的使用還是摸石過河。

這幾天在學習webpack使用中，發(fā)現(xiàn)的一個問題，記錄一下
問題：
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（啥都不設置，給機器看的）*/
    entry : {//入口
        "common" : "./src/page/common/index.js",
        "index" : "./src/page/index/index.js",
        "login" : "./src/page/login/index.js"
        
    },
    
    devServer : {//告訴開發(fā)服務器(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 : "../"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  
    估計是因為把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的使用還是摸石過河。大家知道原因麻煩評論告知

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/110216.html

相關(guān)文章

  • webpack優(yōu)化

    摘要：使用要給項目構(gòu)建接入動態(tài)鏈接庫的思想，需要完成以下事情把網(wǎng)頁依賴的基礎模塊抽離出來，打包到一個個單獨的動態(tài)鏈接庫中去。接入已經(jīng)內(nèi)置了對動態(tài)鏈接庫的支持，需要通過個內(nèi)置的插件接入，它們分別是插件用于打包出一個個單獨的動態(tài)鏈接庫文件。 webpack優(yōu)化 查看所有文檔頁面：全棧開發(fā)，獲取更多信息。原文鏈接：webpack優(yōu)化，原文廣告模態(tài)框遮擋，閱讀體驗不好，所以整理成本文，方便查找。 ...

    ChanceWong 評論0 收藏0

  • webpack 單頁面應用實戰(zhàn)

    摘要：關(guān)于這個單頁面應用大家可以直接去我的上查看，我將結(jié)合這個項目去介紹。 這篇文章將介紹如何利用 webpack 進行單頁面應用的開發(fā)，算是我在實際開發(fā)中的一些心得和體會,在這里給大家做一個分享。webpack 的介紹這里就不多說了，可以直接去官網(wǎng)查看。 關(guān)于這個單頁面應用大家可以直接去我的github上查看https://github.com/huangshuwei/webpackFor...

    anonymoussf 評論0 收藏0

  • webpack 項目構(gòu)建：（三）開發(fā)環(huán)境——本地服務器搭建

    摘要：上一章我們了解了的編譯環(huán)境搭建項目構(gòu)建二編譯環(huán)境搭建這一章我們會結(jié)合的，介紹本地測試服務器的搭建過程。三開發(fā)環(huán)境有一些特性是專門用于開發(fā)環(huán)境的，可以幫助我們搭建一個更好的開發(fā)環(huán)境。我們可以通過配合使用來搭建本地服務。 注：以下教程均在 windows 環(huán)境實現(xiàn)，使用其他操作系統(tǒng)的同學實踐過程可能會有些出入。 ??上一章我們了解了 webpack 的 ES6 編譯環(huán)境搭建：webpack...

    tolerious 評論0 收藏0

  • webpack配置

    摘要：配置無入口的在輸出時的文件名稱。配置發(fā)布到線上資源的前綴，為類型。則是用于配置這個異步插入的標簽的值。配置以何種方式導出庫。是字符串的枚舉類型，支持以下配置。在為時，配置將沒有意義。是可選配置項，類型需要是其中一個。 webpack配置 查看所有文檔頁面：全棧開發(fā)，獲取更多信息。原文鏈接：第2章 配置，原文廣告模態(tài)框遮擋，閱讀體驗不好，所以整理成本文，方便查找。 配置 Webpack...

    Doyle 評論0 收藏0

  • React入門系列 - 2 編寫第一個Hello world的React程序

    摘要：安裝必要的開發(fā)包安裝兩個包安裝編寫一個的首先我們編寫一個的組件但是這僅僅是一個組件，我們需要一個頁面來容納的組件。到這一步，需要準備的東西已經(jīng)完成了。 2.1 采用create react app 編寫 create-react-app項目 [[點擊前往Github]](https://github.com/facebook/c... 是facebook推出的入門初始化項目，適合新手第...

    PingCAP 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<