Webpack 實戰入門系列（二）：插件使用及熱更新打包

本文由公衆號 字節逆旅 的主筆 慢一拍 寫做而成，慢一拍 已認證成爲圖雀社區專欄做者，後續將爲你們帶來一系列 Webpack 的文章，敬請期待✌️。歡迎加入圖雀社區，一塊兒創做精彩的免費技術實戰教程，加速技術的傳播！

若是您以爲咱們寫得還不錯，記得 點贊 + 關注 + 評論 三連，鼓勵咱們寫出更好的教程💪

今天帶來webpack入門系列第二篇，若是對webpack還不熟悉的能夠先看入門第一篇一小時入門webpack。本文重點是插件用法及熱更新打包，會涉及三個知識點，都是比較基礎重要的內容。包括：插件用法(HtmlWebpackPlugin)、文件監聽、熱更新打包。教程相關代碼已經上傳到github（文末有地址），有須要能夠下載。最好按步驟本身來，代碼僅供參考。

若是對本文中任何知識點或者部分用到的文件感受陌生，強烈建議你轉到一小時入門webpack先預熱學習，相信你讀了第一篇，會更有胃口吃今天這盤菜。固然，若是你已經入門webpack,這篇就當是你的知識點總結了，同樣有收藏價值。

1、HtmlWebpackPlugin插件用法

先看看插件的概念，這裏這是官方網站對插件的一段解釋：webpack 有着豐富的插件接口(rich plugin interface)。webpack 自身的多數功能都使用這個插件接口。這個插件接口使 webpack 變得極其靈活。總結起來就是插件可⽤於包⽂件的優化，資源管理和環境變量注⼊。 說白點，所謂插件，就是我自己不具有這個功能，可是我能開放一些插件接口，而後大家想要什麼功能就開發一些插件，接着將插件對接到webpack上來實現你想要的目的，瀏覽器插件跟這是一個意思。你若是願意，也能夠開發一個本身的插件。

如今就來看看HtmlWebpackPlugin這個插件，咱們前面都是手動建立的html頁面，而這個插件能夠自動生成基本的 html 頁面，使用起來比較簡單。 下面是使用步驟：

安裝插件

npm install --save-dev html-webpack-plugin
複製代碼

安裝好了就能夠在後面配置並使用了。

配置使用

以下所示，在webpack.config.js文件中添加一個HtmlWebpackPlugin常量，引用此插件，而後在下面的配置中加上plugins節點，裏面加上此插件實例。plugins表明插件入口，全部插件都在這裏配置。

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        index: './src/index.js',
    },
    output: {
        path: path.join(__dirname,'dist'),
        filename: 'index.js'
    },
    mode: 'production',
    plugins: [new HtmlWebpackPlugin()],
    module: {
        rules: [..]
    }
}
複製代碼

配置好了以後就運行 npm run build看下效果吧。 結果跑出了一片紅豔豔的代碼，截圖以下:

我這隻截取了一部分，下面還有好多，只看最上面的的，有這麼幾行：

ERROR in   Error: Child compilation failed:
  Module build failed (from ./node_modules/babel-loader/lib/index.js):
  SyntaxError: E:\demo\newwebpack\section two\node_modules\html-webpack-plugin\default_index.ejs: Unexpected token (1:0)
複製代碼

仔細看，有babel-loader，還有html-webpack-plugin，猜想應該是html這個插件裏有些內容與babel-loader依賴相沖突了，這個loader是本系列教程第一篇裏用過的，用來解析es6等語法。這個問題的解決辦法就是讓項目在構建時忽略掉依賴包，以下，babel-loader配置下加上exclude: /node_modules/配置，就是忽略依賴包的意思。

{ 
   test: /\.js$/ ,
   use: "babel-loader",
   exclude: /node_modules/
} 
複製代碼

好了，解決這個問題，再次運行npm run build，就能夠看到在dist目錄下生成了一個index.html文件。 其實這個插件還有相關配置，咱們能夠嘗試體驗一下：

new HtmlWebpackPlugin({
        title: 'leaningwebpack',
        filename: 'webpack-index.html',
        favicon: 'webpack.ico'
    })
複製代碼

title : 設置生成的 html 文件的標題; filename：html文件名，默認是 index.html;;  favicon：設置一個網頁圖標

配置就先簡單介紹這些，詳細內容能夠參考這篇文章 html-webpack-plugin用法全解 因爲生成的html文件裏沒有內容，咱們在第一講裏的有些樣式沒有了，能夠在hellowebpack.js文件裏把代碼修改下：

export function hellowebpack() {
    return '<div class="color-text">hellowebpack</div>'
}
複製代碼

2、文件監聽

文件監聽是在發現源碼發生變化時，自動從新構建出新的輸出文件。這個對咱們的開發是有幫助的，這樣不用每次修改一點內容，就要運行一次打包，比較浪費時間。

有兩種方式能夠實現文件監聽： 一、「watch」: "webpack --watch" 二、在配置 webpack.config.js中設置watch: true

第一種方式：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"
  },
複製代碼

在package.json文件中添加一個「webpack --watch」配置(別名爲watch)，代替webpack，而後構建時運行 npm run watch，能夠看到watch已經開始啓動了。

而後咱們在hellowebpack.js文件中修改些內容，發現watch也在跟蹤執行，刷新下瀏覽器，就能看到變化。

export function hellowebpack() {
    return '<div class="color-text">hellowebpack123</div>'
}
複製代碼

第二種方式：

在webpack.config.js文件的配置根節點加上watch:true這一行就好了。

這種方式，運行時仍然用npm run build也能夠啓動監聽。 這種方式跟上面本質上是同樣，並且都要刷新一下瀏覽器，才能看到咱們修改項目文件的效果。它實際上是輪詢判斷文件的最後編輯時間是否變化，當某個文件發生了變化，並不會馬上告訴監聽者，而是先緩存起來，等aggregateTimeout。下面列出了開啓監聽狀態下的watch配置，能夠參考理解下。

module.export = {
  //默認false，不開啓
  watch:true,
  //watch啓動時watchOptions纔有效
  watchOptions: {
    //默認爲空，設置不監聽的文件或者文件夾，支持正則匹配
    ignored: /node_modules/,
    //監聽到變化發生後會等300ms再去執行，默認300ms
     aggregateTimeout:300,
     //設置輪詢文件是否變化時間，默認每秒問1000次
     poll:1000
  }
}
複製代碼

那麼問題來了，是否能夠實現不用手動刷新瀏覽器更新？有辦法的，熱更新來了。

3、熱更新

熱更新的意思就是能夠在編輯器上修改代碼的同時，在瀏覽器上看到同步更新效果，聽起來是否是很神奇？來看步驟：

wds無刷新瀏覽器

wds就是webpack-dev-server的簡稱，相比前面講的文件監聽watch這種方式來講，這個方案自己不輸出文件，而是放在內存中，性能更好。這個方案會用到HotModuleReplacementPlugin這個插件，屬於webpack的內置插件。來看步驟：

安裝

npm i webpack-dev-server -D
複製代碼

先安裝後面要用到的webpack-dev-server 依賴，接着添加配置就能夠用了。

配置使用

在package.json添加配置

「dev」: "webpack-dev-server --open"
複製代碼

而後在webpack.config.js中添加配置，先聲明一個常量webpack

const webpack = require('webpack');
複製代碼

再添加一個插件到plugins節點下的數組裏

new webpack.HotModuleReplacementPlugin()
複製代碼

最後再添加一個與plugins同級的devServer配置，其中contentBase表示此熱更新打包是針對dist文件裏的內容，hot:true表示開啓了熱更新狀態。

devServer: {
        contentBase: './dist',
        hot: true
    },
複製代碼

總體上，webpack.config.js的配置看起來就是這個樣子：

配置好以後，咱們就來體驗一下效果，運行

npm run dev
複製代碼

會看到它執行了webpack-dev-server --open這個命令，若是看到相似這個頁面，表示這裏打開的是dist目錄下文件列表。

選擇你的html頁面，咱們來試下熱更新效果。在hellowebpack.js文件裏修改內容，

export function hellowebpack() {
    return '<div class="color-text">hellowebpack12345</div>'
}
複製代碼

保存文檔，而後當即看瀏覽器，會發現頁面會自動刷新展現最新內容，熱更新效果已經實現了。

ok，今天就講到這裏，代碼在github上，看本節內容，就在第section one基礎上開始照着文章進行操做，section two是最後的代碼狀態。

代碼地址：github.com/bridgeToVil…

若是本文對你有幫助就點個在看吧，歡迎轉發哦！

想要學習更多精彩的實戰技術教程？來圖雀社區逛逛吧。

若是您以爲咱們寫得還不錯，但願您能給❤️這篇文章點贊❤️哦