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

資訊專欄INFORMATION COLUMN

Webpack 4.X 從入門到精通 - devServer與mode（三）

王偉廷 / 904人閱讀

摘要：同時(shí)它還提供了自動(dòng)刷新熱更新等功能，使開發(fā)變得非常方便。的到來減少了很多的配置，它內(nèi)置了很多的功能。

上一篇文章里詳細(xì)介紹了一下插件的用法，這一篇文章接著豐富module.exports里的屬性。如今的前端發(fā)展已經(jīng)非常迅速了，伴隨而來的是開發(fā)模式的轉(zhuǎn)變?，F(xiàn)在已經(jīng)不再是寫個(gè)靜態(tài)頁面并放在瀏覽器里打開預(yù)覽一下了。在實(shí)際的開發(fā)中會(huì)經(jīng)常需要使用http服務(wù)器，比如之前的ajax，想要看到效果就必需搭建一個(gè)服務(wù)器。搭建服務(wù)器的方式有非常的多，而webpack則原生的提供服務(wù)器的支持，大家無需再去下載軟件。同時(shí)它還提供了自動(dòng)刷新、熱更新等功能，使開發(fā)變得非常方便。

devServer 安裝使用 
npm i webpack-dev-server -D

打開終端，并進(jìn)入到對(duì)應(yīng)的項(xiàng)目里（我的為webpack-demo），執(zhí)行命令webpack-dev-server，如果終端里顯示如下則表示已經(jīng)成功開啟服務(wù)器

注意：
1、此時(shí)可能會(huì)提示webpack-dev-server不是內(nèi)部命令，解決辦法為在全局再次安裝一下webpack-dev-server模塊，或者在package.json里的scripts里加上"dev": "webpack-dev-server"，然后執(zhí)行命令npm run dev
2、此時(shí)我并沒有通過webpack命令生成一個(gè)dist目錄（目錄結(jié)構(gòu)如下圖），然后在瀏覽器里輸入地址http://localhost:8080/后，頁面會(huì)正常顯示。這個(gè)原因是devServer會(huì)將webpack構(gòu)建出的文件保存到內(nèi)存里，不需要打包生成就能預(yù)覽

配置參數(shù)

webpack.config.js的內(nèi)容如下：

const path=require("path");
const HtmlWebpackPlugin=require("html-webpack-plugin");

module.exports={
    entry:{
        index:"./src/index.js",
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name].bundle.js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:"陳學(xué)輝",
            template:"./src/template.html",
            filename:"index.html",
        })
    ],
    devServer:{
        host:"localhost",    //服務(wù)器的ip地址
        port:1573,    //端口
        open:true,    //自動(dòng)打開頁面
    }
}

index.js文件內(nèi)容如下：

console.log("這是入口文件");

template.html文件內(nèi)容如下：



    
        
        <%= htmlWebpackPlugin.options.title %>
    
    
        
這是自帶的div

執(zhí)行命令webpack-dev-server后，瀏覽器會(huì)自動(dòng)打開頁面，同時(shí)如果修改index.js文件后瀏覽器會(huì)自動(dòng)刷新，如下圖：

熱更新

默認(rèn)情況下開啟了服務(wù)器后，只要入口文件有更新那整個(gè)頁面就會(huì)重新刷新。如果頁面里引入的模塊非常多的情況下讓整個(gè)頁面刷新就會(huì)變得有些慢，這個(gè)問題可以交給熱更新去解決。熱更新的意思就是只更新有改動(dòng)的模塊（像ajax一樣局部刷新）

使用步驟

1、引入webpack模塊

const webpack=require("webpack");

2、寫入插件

plugins:[
    new HtmlWebpackPlugin({
        title:"陳學(xué)輝",
        template:"./src/template.html",
        filename:"index.html",
    }),
    new webpack.HotModuleReplacementPlugin()    //引入熱更新插件
]

3、devServer里增加hot參數(shù)

devServer:{
    host:"localhost",    //服務(wù)器的ip地址
    port:1573,    //端口
    open:true,    //自動(dòng)打開頁面，
    hot:true,    //開啟熱更新
}

此時(shí)并不能看出效果，到后面的文章里講loader的時(shí)候就可以看出來效果
devServer的其它配置：https://webpack.docschina.org...

mode

mode是webpack4新增的一條屬性，它的意思為當(dāng)前開發(fā)的環(huán)境。mode的到來減少了很多的配置，它內(nèi)置了很多的功能。相較以前的版本提升了很多，減少了很多專門的配置

提升了構(gòu)建速度


默認(rèn)為開發(fā)環(huán)境，不需要專門配置


提供壓縮功能，不需要借助插件


提供SouceMap，不需要專門配置

mode分為兩種環(huán)境，一種是開發(fā)環(huán)境（development）,一種是生產(chǎn)環(huán)境（production）。開發(fā)環(huán)境就是我們寫代碼的環(huán)境，生產(chǎn)環(huán)境就是代碼放到線上的環(huán)境。這兩種環(huán)境的最直觀區(qū)別就是，開發(fā)環(huán)境的代碼不提供壓縮，生產(chǎn)環(huán)境的代碼提供壓縮。

使用方式1：在命令后面添加 
webpack --mode development
webpack --mode production
使用方式2：在package.json里添加 
"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },

此時(shí)后成dist目錄用的是生產(chǎn)環(huán)境，打開服務(wù)器用的是開發(fā)環(huán)境，然后通過命令執(zhí)行npm run build或者npm run dev，它們的區(qū)別如下
dist目錄里的index.bundle.js內(nèi)容如下：

http://localhost:1573/index.bundle.js內(nèi)容如下：

資料下載

下一篇：Webpack 4.X 從入門到精通 - module（四）

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

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

相關(guān)文章

  • Webpack 4.X 從入門到精通 - module（四）

    摘要：這就需要把文件單獨(dú)拎出來，那需要一個(gè)插件來配合才能完成版本需要以上，低版本請(qǐng)使用使用步驟安裝在里引入模塊寫入陳學(xué)輝文件目錄會(huì)放入里寫入代替執(zhí)行命令后可以看到目錄里已經(jīng)多了一個(gè)文件夾，這個(gè)文件夾里放了一個(gè)文件。 概念 在webpack中任何一個(gè)東西都稱為模塊，js就不用說了。一個(gè)css文件，一張圖片、一個(gè)less文件都是一個(gè)模塊，都能用導(dǎo)入模塊的語法（commonjs的require，E...

    harryhappy 評(píng)論0 收藏0

  • Webpack 4.X 從入門到精通 - 第三方庫（六）

    摘要：在開發(fā)的時(shí)候會(huì)時(shí)常用到第三方的庫或者框架，比如耳熟能詳?shù)?。使用第三方庫在入口文件?dāng)中直接導(dǎo)入安裝目錄結(jié)構(gòu)如圖內(nèi)容如下內(nèi)容如下陳學(xué)輝內(nèi)容如下這是自帶的內(nèi)容如下內(nèi)容如下引入后打開頁面會(huì)看到最后一個(gè)標(biāo)簽有了一個(gè)綠色的背景。 在開發(fā)的時(shí)候會(huì)時(shí)常用到第三方的庫或者框架，比如耳熟能詳?shù)膉query。借助它們能提高開發(fā)效率，但是如何在webpack中使用呢。這篇文章介紹兩個(gè)東西，如何使用第三方庫以及...

    dunizb 評(píng)論0 收藏0

  • Webpack 4.X 從入門到精通 - loader（五）

    摘要：處理與的語法大部分已經(jīng)被各在瀏覽器所支持，當(dāng)然除了萬惡的，但是部分新增很遺憾并不被瀏覽器所支持比如內(nèi)置對(duì)象新增的一些方法和對(duì)象等。但是在這里卻不需要，是因?yàn)榈睦镆呀?jīng)把內(nèi)容添上了，就不需要?jiǎng)?chuàng)建文件了源碼下載下一篇從入門到精通第三方庫六 通過上一篇文章相信大家已經(jīng)明白了loader的概念。那這篇文章繼續(xù)介紹一些常用loader，并展現(xiàn)它的強(qiáng)大之處 處理less less與sass的功能都一...

    Me_Kun 評(píng)論0 收藏0

  • Webpack入門到精通（1）

    前言 什么是webpack 本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 自...

    wangbinke 評(píng)論0 收藏0

  • Webpack入門到精通（1）

    前言 什么是webpack 本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。 webpack 有哪些功能(代碼轉(zhuǎn)換 文件優(yōu)化 代碼分割 模塊合并 ...

    SunZhaopeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<