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

王偉廷發布于2019-08-23 10:47 / 895人閱讀

摘要：同時它還提供了自動刷新熱更新等功能，使開發變得非常方便。的到來減少了很多的配置，它內置了很多的功能。

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

devServer 安裝使用

npm i webpack-dev-server -D

打開終端，并進入到對應的項目里（我的為webpack-demo），執行命令webpack-dev-server，如果終端里顯示如下則表示已經成功開啟服務器

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

配置參數

webpack.config.js的內容如下：

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:"陳學輝",
            template:"./src/template.html",
            filename:"index.html",
        })
    ],
    devServer:{
        host:"localhost",    //服務器的ip地址
        port:1573,    //端口
        open:true,    //自動打開頁面
    }
}

index.js文件內容如下：

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

template.html文件內容如下：



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

執行命令webpack-dev-server后，瀏覽器會自動打開頁面，同時如果修改index.js文件后瀏覽器會自動刷新，如下圖：

熱更新

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

使用步驟

1、引入webpack模塊

const webpack=require("webpack");

2、寫入插件

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

3、devServer里增加hot參數

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

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

mode

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

提升了構建速度

默認為開發環境，不需要專門配置

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

提供SouceMap，不需要專門配置

mode分為兩種環境，一種是開發環境（development）,一種是生產環境（production）。開發環境就是我們寫代碼的環境，生產環境就是代碼放到線上的環境。這兩種環境的最直觀區別就是，開發環境的代碼不提供壓縮，生產環境的代碼提供壓縮。

使用方式1：在命令后面添加

webpack --mode development
webpack --mode production

使用方式2：在package.json里添加

"scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  },

此時后成dist目錄用的是生產環境，打開服務器用的是開發環境，然后通過命令執行npm run build或者npm run dev，它們的區別如下
dist目錄里的index.bundle.js內容如下：

http://localhost:1573/index.bundle.js內容如下：

資料下載

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

云服務器 GPU云服務器前端從入門到精通云計算從入門到精通 html從入門到精通 python從入門到精通

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96678.html

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

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

harryhappy 2019-08-23 11:02 評論0 收藏0
Webpack 4.X 從入門到精通 - 第三方庫（六）

摘要：在開發的時候會時常用到第三方的庫或者框架，比如耳熟能詳的。使用第三方庫在入口文件當中直接導入安裝目錄結構如圖內容如下內容如下陳學輝內容如下這是自帶的內容如下內容如下引入后打開頁面會看到最后一個標簽有了一個綠色的背景。在開發的時候會時常用到第三方的庫或者框架，比如耳熟能詳的jquery。借助它們能提高開發效率，但是如何在webpack中使用呢。這篇文章介紹兩個東西，如何使用第三方庫以及...

dunizb 2019-08-23 11:32 評論0 收藏0
Webpack 4.X 從入門到精通 - loader（五）

摘要：處理與的語法大部分已經被各在瀏覽器所支持，當然除了萬惡的，但是部分新增很遺憾并不被瀏覽器所支持比如內置對象新增的一些方法和對象等。但是在這里卻不需要，是因為的里已經把內容添上了，就不需要創建文件了源碼下載下一篇從入門到精通第三方庫六通過上一篇文章相信大家已經明白了loader的概念。那這篇文章繼續介紹一些常用loader，并展現它的強大之處處理less less與sass的功能都一...

Me_Kun 2019-08-26 12:17 評論0 收藏0
Webpack入門到精通（1）

前言什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。webpack 有哪些功能(代碼轉換文件優化代碼分割模塊合并自...

wangbinke 2019-08-26 13:52 評論0 收藏0
Webpack入門到精通（1）

前言什么是webpack 本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。 webpack 有哪些功能(代碼轉換文件優化代碼分割模塊合并 ...

SunZhaopeng 2019-05-23 17:29 評論0 收藏0