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

資訊專欄INFORMATION COLUMN

webpack學習(三)—— webpack-dev-server

CKJOKER / 3628人閱讀

摘要:在項目根目錄下創(chuàng)建,通過這個文件來起服務(wù)。到這里為止,自動刷新的內(nèi)容基本講完了。注意到一點,目前自動刷新都是刷新整個頁面。其中表示熱加載模塊,表示。后續(xù)我還會進行更深入的學習,希望和大家共同進步。

本文主要介紹以下兩方面的內(nèi)容:

webpack-dev-server自動刷新

熱加載(Hot Module Replacement

自動刷新

webpack-dev-server提供了兩種自動刷新的模式

iframe模式

inline模式

這兩種模式都支持Hot Module Replacement(熱加載),所謂熱加載是指當文件發(fā)生變化后,內(nèi)存中的bundle文件會收到通知,同時更新頁面中變化的部分,而非重新加載整個頁面。

我們先介紹自動刷新,再來談熱加載。

iframe模式

前兩篇文章中提到,我們在控制臺輸入

$ webpack-dev-server

就啟動了服務(wù),并且支持自動刷新,其實,這種方式就是iframe模式。查看頁面元素可以發(fā)現(xiàn):

如圖中黑框所示,可以看到其實是通過iframe內(nèi)使我們實際的頁面。
這種方式有一點需要注意:瀏覽器地址欄的url地址不會受頁面跳轉(zhuǎn)的影響,將一直保持為http://localhost:8080/webpack-dev-server。
比如,現(xiàn)在給index.html頁面加上一個跳轉(zhuǎn)鏈接,跳轉(zhuǎn)到foo.html。
foo.html



    
        
        webpack demo
    
    
        

this is another page

index.html中加入跳轉(zhuǎn)鏈接如下:


    

webpack demo

click here to go to foo.html

當點擊鏈接跳轉(zhuǎn)到foo.html頁面時,可以看到瀏覽器的地址欄中仍然是http://localhost:8080/webpack-dev-server。如下:

inline模式

這里要說一下,目前我們啟動webpack-dev-server都是通過命令行實現(xiàn)的。實際上,還可以通過nodeAPI WebpackDevServer實現(xiàn)。
先看命令行如何實現(xiàn)inline模式,有兩種方法:
1、啟動時配置

$ webpack-dev-server --inline

2、配置文件配置,在webpack.config.js中加入

devServer: { inline: true }

這樣我們就可以通過http://localhost:8080/來訪問我們的文件了。比如這樣http://localhost:8080/index.html來訪問index.html,且頁面跳轉(zhuǎn)回反映在瀏覽器的地址欄中。

接下來說明如何使用WebpackDevServer來實現(xiàn)inline模式。
在項目根目錄下創(chuàng)建server.js,通過這個文件來起服務(wù)。
server.js

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");

var config = require("./webpack.config.js");
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
    publicPath: "/dist/"
});
server.listen(8080);

有幾個問題需要說明:
1、這里加載了webpackwebpack-dev-server兩個模塊,這個require默認會從node-modules中去加載。由于我們之前安裝時為了方便在命令行下使用,采用了全局安裝的方式-g,所以本地并沒有安裝這個模塊。這里需要在當前項目中再進行安裝

$ npm install webpack webpack-dev-server

2、在配置文件webpack.config.js中無需再對devServer進行配置,因為我們這樣啟動服務(wù)的話,WebpackDevServer是訪問不到webpack中的配置的。但是,我們需要對配置文件的entry進行修改:

entry: ["./src/entry.js"]

以數(shù)組方式來寫,這樣就可以支持多個入口文件。同時在server.js中加入

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");

3、WebpackDevServer支持兩個參數(shù),其中第二個參數(shù)對WebpackDevServer進行了配置,剛剛提到,WebpackDevServer是訪問不到webpack中的配置的,所以這里我們要再設(shè)置publicPath
當然,為了方便處理,一般我們可以統(tǒng)一將WebpackDevServer的配置在webpack.config.js中的devServer中設(shè)置,再將devServer作為第二個參數(shù)傳給WebpackDevServer。如下:
webpack.config.js

module.exports = {
    devServer: {  //這里配置webpack-dev-server
        publicPath: "/dist/"
        //這里還可以加入其它你需要的參數(shù)
    },
    entry: ["./src/entry.js"],
    output: {
        path: path.join( __dirname, "/dist"),
        publicPath: "/dist/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            //....
        ]
    }
};

server.js

var config = require("./webpack.config.js");
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, config.devServer);  //這里將其作為參數(shù)傳進來

最后運行server.js就可以啟動服務(wù)了。

$ node server.js

到這里為止,自動刷新的內(nèi)容基本講完了。注意到一點,目前自動刷新都是刷新整個頁面。下面來說下熱加載,也就是只有變化的內(nèi)容更新,而非刷新整個頁面。

Hot Module Replacement(熱加載)

方法一:直接通過命令行設(shè)置

$ webpack-dev-server --hot

打開頁面可以在控制臺看到以上內(nèi)容,說明熱加載配置成功。其中HMS表示熱加載模塊,WDS表示webpack-dev-server。

方法二:通過nodejsapi配置
這個方法需要對webpack.config.js做出一些配置。
第一步:在webpack配置文件入口參數(shù)中加入webpack/hot/dev-server

server.js中作如下修改即可:

config.entry.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");  //這里在入口參數(shù)中又添加了一項,為熱加載的dev-server

第二步:添加plugin,添加熱加載模塊

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

第三步:在devServer中配置hottrue

devServer: {
    publicPath: "/dist/",
    hot: true  //這里配置了熱加載模式為true
    //這里還可以加入其它你需要的參數(shù)
}

最終,webpack.config.js如下:

let path = require("path");
let webpack = require("webpack");

module.exports = {
    devServer: {
        publicPath: "/dist/",
        hot: true
        //這里還可以加入其它你需要的參數(shù)
    },
    entry: ["./src/entry.js"],
    output: {
        path: path.join( __dirname, "/dist"),
        publicPath: "/dist/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /.css$/, 
                loader: "style!css"
            },
            {
                test: /.less$/,
                loader: "style!css!less"
            },
            {
                test: /.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
};

server.js如下:

var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");

var config = require("./webpack.config.js");
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, config.devServer);
server.listen(8080);

啟動服務(wù):

$ node server.js

可以看到配置成功,如下圖所示:

結(jié)語

至此,本文對webpack-dev-server的自動刷新和熱加載做了詳細介紹,當然,它的原理還有待更深一步的探索。后續(xù)我還會進行更深入的學習,希望和大家共同進步。

參考資料

http://webpack.github.io/docs...

(本文完)

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

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

相關(guān)文章

  • webpack 項目構(gòu)建:()開發(fā)環(huán)境——本地服務(wù)器搭建

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

    tolerious 評論0 收藏0
  • webpack使用之基礎(chǔ)篇

    摘要:是一個和差不多同時代的產(chǎn)物,但是它只支持基于,對于來說只能興嘆了。找一個自己順手的就好,順便一提,我現(xiàn)在主要使用輔助。 說到自動化構(gòu)建,你想到了什么?基于AMD的requirejs?還是基于commoJS的browserify?他們都在各自的領(lǐng)域或者說時代發(fā)揮了很重要的作用。但是時代的變遷,webpack成了現(xiàn)在的佼佼者,我們不知道什么時候wepback也會被取代,但是現(xiàn)在我們必須要掌...

    zhichangterry 評論0 收藏0
  • 新人學習,照文檔手擼webpack,bug基本修復完善(有問題請聯(lián)系我,并非完全原創(chuàng),不喜勿噴。。。

    摘要:介紹簡單點來說就就是一個配置文件,所有的魔力都是在這一個文件中發(fā)生的。一安裝全局安裝在文件夾里面也需要安裝這個是在你根目錄下進行的全局安裝記得加太慢,推薦用的鏡像安裝方法一樣。二創(chuàng)建項目新建文件夾命令行輸入命令。 介紹:webpack簡單點來說就就是一個配置文件,所有的魔力都是在這一個文件中發(fā)生的。 這個配置文件主要分為三大塊 entry 入口文件 讓webpack用哪個文件作為項目的...

    xiangchaobin 評論0 收藏0
  • Webpack 4.X 從入門到精通 - devServer與mode(

    摘要:同時它還提供了自動刷新熱更新等功能,使開發(fā)變得非常方便。的到來減少了很多的配置,它內(nèi)置了很多的功能。 上一篇文章里詳細介紹了一下插件的用法,這一篇文章接著豐富module.exports里的屬性。如今的前端發(fā)展已經(jīng)非常迅速了,伴隨而來的是開發(fā)模式的轉(zhuǎn)變?,F(xiàn)在已經(jīng)不再是寫個靜態(tài)頁面并放在瀏覽器里打開預覽一下了。在實際的開發(fā)中會經(jīng)常需要使用http服務(wù)器,比如之前的ajax,想要看到效果就...

    王偉廷 評論0 收藏0
  • webpack學習(二)—— 進階

    摘要:上篇文章中簡單介紹了的最基本用法,且項目結(jié)構(gòu)十分簡單,只有一個頁面一個頁面兩個文件。本文將介紹如何使用對具有較為規(guī)范的結(jié)構(gòu)的項目進行構(gòu)建。這說明監(jiān)測到了文件的變化,但是我們的加載的文件并沒有變。后續(xù)還會更深入地學習,希望和大家一同進步。 上篇文章中簡單介紹了webpack的最基本用法,且項目結(jié)構(gòu)十分簡單,只有一個html頁面、一個css頁面、兩個js文件。本文將介紹如何使用webpac...

    singerye 評論0 收藏0

發(fā)表評論

0條評論

CKJOKER

|高級講師

TA的文章

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