欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Webpack4.X從入門到精通-devServer與mode（三）-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、侯馬網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城系統(tǒng)網(wǎng)站開發(fā)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為侯馬等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

devServer

安裝使用

npm i webpack-dev-server -D

打開終端，并進入到對應(yīng)的項目里（我的為webpack-demo），執(zhí)行命令webpack-dev-server，如果終端里顯示如下則表示已經(jīng)成功開啟服務(wù)器
Webpack 4.X 從入門到精通 - devServer與mode（三）

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

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

配置參數(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,  //自動打開頁面
    }
}

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <div id="box">這是自帶的div</div>
    </body>
</html>

執(zhí)行命令webpack-dev-server后，瀏覽器會自動打開頁面，同時如果修改index.js文件后瀏覽器會自動刷新，如下圖：
Webpack 4.X 從入門到精通 - devServer與mode（三）

熱更新

默認情況下開啟了服務(wù)器后，只要入口文件有更新那整個頁面就會重新刷新。如果頁面里引入的模塊非常多的情況下讓整個頁面刷新就會變得有些慢，這個問題可以交給熱更新去解決。熱更新的意思就是只更新有改動的模塊（像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,  //自動打開頁面，
    hot:true,   //開啟熱更新
}

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

mode

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

  1. 提升了構(gòu)建速度
  2. 默認為開發(fā)環(huán)境，不需要專門配置
  3. 提供壓縮功能，不需要借助插件
  4. 提供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"
  },

此時后成dist目錄用的是生產(chǎn)環(huán)境，打開服務(wù)器用的是開發(fā)環(huán)境，然后通過命令執(zhí)行npm run build或者npm run dev，它們的區(qū)別如下
dist目錄里的index.bundle.js內(nèi)容如下：
Webpack 4.X 從入門到精通 - devServer與mode（三）
http://localhost:1573/index.bundle.js內(nèi)容如下：
Webpack 4.X 從入門到精通 - devServer與mode（三）

資料下載

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱：Webpack4.X從入門到精通-devServer與mode（三）-創(chuàng)新互聯(lián)
文章路徑：http://chinadenli.net/article2/dosioc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站設(shè)計、服務(wù)器托管、全網(wǎng)營銷推廣、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)