webpack入門學習筆記04 —— 安裝和配置webpack開發服務器

1. 寫在前面

在以前的博客中，每次使用webpack打包編譯完成以後，咱們都須要手動打開編譯後的index.html文件，這樣對於前端開發的調試很不方便。爲了解決這一問題，webpack給出了 開發服務器 這一方案。在進行開發的過程當中，咱們可使用webpack啓動一個開發服務器，來實時查看本身的項目，很方便進行調試。

相信不少前端開發者都用過webpack的開發服務器，可是有些開發者不是很瞭解它。那麼在這篇文章中，我就給你們介紹webpack的開發服務器，主要內容包括：

• 安裝webpack的開發服務器
• 初步配置webpack的開發服務器
• 深刻配置webpack的開發服務器

2. 安裝webpack的開發服務器

首先執行一下命令來安裝webpack的開發服務器：

yarn add webpack-dev-server -D
複製代碼

安裝完成以後，咱們就能夠經過 npx webpack-dev-server 命令啓動開發服務器，或者在 package.json 文件中新建一條腳本，後續就能夠很方便地使用 npm run 或 yarn 來啓動開發服務器。腳本配置以下：

{
  "name": "webpack-learning",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },
  "devDependencies": {
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.5.1"
  }
}
複製代碼

啓動本地服務器以後，咱們即可以在瀏覽器中經過 http://localhost:8080 來訪問項目了。截圖以下：

3. 初步配置webpack的開發服務器

如今開發服務器已經啓動了，可是顯而易見的是，當前的開發服務器使用的是默認配置，很大程度上不能知足咱們開發的需求，好比：

• 開發服務器不要使用8080端口號，使用其餘的端口號
• 開發服務器打開以後，不是在根目錄下，而是在 build 目錄下
• 開發服務器啓動以後，我但願自動打開瀏覽器
• ......

下面咱們就講解一下，若是初步配置開發服務器，完成上述需求。之因此說是初步配置，是由於開發服務器配置內容較多，後面準備單獨寫一篇博客，講述開發服務器的詳細配置。

其實初步配置開發服務器很簡單，在 webpack.config.json 文件中新增 devServer 屬性，該屬性是一個對象，咱們將一些配置信息寫到該對象下便可，配置代碼以下：

let path = require("path");

module.exports = {
    devServer: {
        port: 3000,      		// 指定開發服務器的端口號
        progress: true, 		// 顯示開啓本地服務器的進度
        contentBase: "./build", // 指定本地服務器默認打開的目錄
        compress: true      	// 是否對代碼進行壓縮
    },
    mode: "development",    
    entry: "./src/index.js",    
    output: {       
        filename: "index.js",   
        path: path.resolve(__dirname, "build")  
    }
}
複製代碼

如今再次開啓開發服務器，就能夠經過 http://localhost:3000 訪問到項目的 build 目錄了，默認尋找該目錄下的 index.html 文件進行渲染，若是沒有則展現該目錄下的全部文件。

4. 深刻配置webpack的開發服務器

以上就是對webpack開發服務器的安裝和初步配置，可是上述的初步配置存在一些問題：咱們但願開發服務器啓動以後，就會顯示咱們項目的頁面，可是上述配置中，若是要看到項目的頁面，一個前提是build目錄下必須存在index.html文件。可是這個文件是打包編譯後才生成的，因此在開發服務器環境下可能不會存在，並且也不會實時刷新，因此很明顯初步配置不能知足咱們的開發需求。

正常狀況下，咱們但願看到的場景是：使用 npm run 或 yarn 來啓動開發服務器以後，就能夠實時看到項目的頁面，若是項目有代碼的更新，頁面也要實時更新。要作到這一點，咱們須要完成如下步驟：

1) 安裝 html-webpack-plugin 插件

執行 yarn add html-webpack-plugin -D 進行安裝該插件

2） 配置 html-webpack-plugin 插件

安裝完成以後，咱們就須要到 webpack.config.js 文件中配置該插件，其實webpack之因此有這麼強大的功能，就是依靠各類各樣的插件。因此在webpack配置文件中，確定會有各類插件的相關配置。這裏介紹 html-webpack-plugin 插件的配置，其餘插件的配置一模一樣。

首先在 webpack.config.js 文件中引入安裝的 html-webpack-plugin 插件，而後新建一個 plugins 屬性，該屬性是一個數組，webpack使用到的插件，都要在這個數組中進行配置。咱們先來看一下具體的配置代碼：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")		// 引入安裝的插件

module.exports = {
    devServer: {
        port: 3000,      		// 指定開發服務器的端口號
        progress: true, 		// 顯示開啓本地服務器的進度
        contentBase: "./build", // 指定本地服務器默認打開的目錄
        compress: true      	// 是否對代碼進行壓縮
    },
    mode: "development",    
    entry: "./src/index.js",    
    output: {       
        filename: "index.js",   
        path: path.resolve(__dirname, "build")   
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',		// 模板文件
            filename: 'index.html',				// 開發服務器中生成的臨時文件
            minify: {
                removeAttributeQuotes: true,	// 是否去除文件中的雙引號
                collapseWhitespace: true		// 是否去除文件中的空行
            },
            hash: true		// 引入文件的時候添加哈希值，防止緩存的問題
        }),
    ]
}
複製代碼

下面講述一下以上文件中的一些配置選項：

• template： 模板文件。webpack開發服務器啓動的時候，會將項目的代碼打包編譯成一個或多個 .js 文件，可是這些文件不能直接在瀏覽器中打開，須要在一個 **.html **文件中引入，才能正常被瀏覽器渲染。模板文件就是這個 .html 。webpack打包編譯後的 .js 腳本文件會自動地被引入到該模板文件中。
• filename： 開發服務器中打包編譯後生成的 臨時文件 的文件名，默認是 index.html 。生成的這個文件是一個臨時文件，存放在內存中，在項目中是看不到的。可是這個文件很是重要，當咱們在瀏覽器中訪問 http://localhost:3000 ，看到的頁面，就是這個文件渲染出來的。同時這個文件也是模板文件和webpack打包後的 .js 文件結合生成的。
• minify： 表示是否對打包編譯生成的代碼進行處理，好比去除空行、去除雙引號等。
• hash：哈希值。若是在模板文件中，直接引入打包編譯後的 .js 文件，那麼有的時候會受到緩存的影響，可是加上哈希值，就不會存在這個問題。若是不加hash值，在臨時文件中引入 .js 文件多是這個狀況：<script src="index.js"></script> ；若是加上了hash值，在臨時文件中引入 .js 文件多是這個狀況：<script src="index.js?fb39b867e8a90e7cc9ec"></script> 。有效解決了緩存帶來的影響。

這裏須要說明的是， html-webpack-plugin 插件的配置不只適用於開發服務器，再進行打包編譯的時候，該插件的相關配置也會發揮做用，好比指定的模板、是否刪除雙引號、是否刪除空行等。

3） 建立模板文件

在上述敘述中，咱們知道在啓動開發服務器的時候，要有一個模板文件，因此咱們要在項目中建立一個模板文件。根據上面的配置要求，該文件是位於 src 文件夾下的 index.html 文件。參考代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <h1>這是一個模板文件</h1>
    
</body>
</html>
複製代碼

5. 後記

以上就我在學習webpack過程當中對開發服務器的一些總結。總的來講，開發服務器就是對當前項目進行打包編譯，將生成的文件存放在內存中，而後起一個本地服務。咱們在瀏覽器中訪問這個本地服務（如 http://localhost:3000 ）來訪問內存的 index.html 文件，進而看到咱們的項目。

並且，這個過程是實時熱更新的，一旦項目代碼有變化，開發服務器會自動進行打包編譯，這樣咱們看到的項目就是最新的。

上一篇: webpack入門學習筆記03 —— 自定義腳本，幫助項目管理

下一篇: webpack入門學習筆記05 —— 使用webpack打包編譯css文件