webpack中如何進(jìn)行插件使用及熱更新打包

webpack中如何進(jìn)行插件使用及熱更新打包，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

今天帶來webpack入門系列第二篇，如果對webpack還不熟悉的可以先看入門第一篇一小時入門webpack。本文重點(diǎn)是插件用法及熱更新打包，會涉及三個知識點(diǎn)，都是比較基礎(chǔ)重要的內(nèi)容。包括：插件用法(HtmlWebpackPlugin)、文件監(jiān)聽、熱更新打包。教程相關(guān)代碼已經(jīng)上傳到github（文末有地址），有需要可以下載。

一、HtmlWebpackPlugin插件用法

先看看插件的概念，這里這是官方網(wǎng)站對插件的一段解釋：webpack 有著豐富的插件接口(rich plugin interface)。webpack 自身的多數(shù)功能都使用這個插件接口。這個插件接口使 webpack 變得極其靈活?？偨Y(jié)起來就是插件可?于包?件的優(yōu)化，資源管理和環(huán)境變量注?。

說白點(diǎn)，所謂插件，就是我本身不具備這個功能，但是我能開放一些插件接口，然后你們想要什么功能就開發(fā)一些插件，接著將插件對接到webpack上來實現(xiàn)你想要的目的，瀏覽器插件跟這是一個意思。你如果愿意，也可以開發(fā)一個自己的插件。

現(xiàn)在就來看看HtmlWebpackPlugin這個插件，我們前面都是手動創(chuàng)建的html頁面，而這個插件可以自動生成基本的html頁面，使用起來比較簡單。
下面是使用步驟：

安裝插件

npm install --save-dev html-webpack-plugin

安裝好了就可以在后面配置并使用了。

配置使用

如下所示，在webpack.config.js文件中添加一個HtmlWebpackPlugin常量，引用此插件，然后在下面的配置中加上plugins節(jié)點(diǎn)，里面加上此插件實例。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: [..]    }}

配置好了之后就運(yùn)行 npm run build看下效果吧。
結(jié)果跑出了一片紅艷艷的代碼，截圖如下:

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

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)

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

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

好了，解決這個問題，再次運(yùn)行npm run build，就可以看到在dist目錄下生成了一個index.html文件。

其實這個插件還有相關(guān)配置，我們可以嘗試體驗一下：

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

title: 設(shè)置生成的 html 文件的標(biāo)題;
filename：html文件名，默認(rèn)是index.html;; 
favicon：設(shè)置一個網(wǎng)頁圖標(biāo)

配置就先簡單介紹這些，詳細(xì)內(nèi)容可以參考這篇文章 html-webpack-plugin用法全解(https://segmentfault.com/a/1190000007294861)

由于生成的html文件里沒有內(nèi)容，我們在第一講里的有些樣式?jīng)]有了，可以在hellowebpack.js文件里把代碼修改下：

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

二、文件監(jiān)聽

文件監(jiān)聽是在發(fā)現(xiàn)源碼發(fā)生變化時，自動重新構(gòu)建出新的輸出文件。這個對我們的開發(fā)是有幫助的，這樣不用每次修改一點(diǎn)內(nèi)容，就要運(yùn)行一次打包，比較浪費(fèi)時間。

有兩種方式可以實現(xiàn)文件監(jiān)聽：
1、“watch”:"webpack --watch"
2、在配置 webpack.config.js中設(shè)置watch: true

第一種方式：

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

在package.json文件中添加一個“webpack --watch”配置(別名為watch)，代替webpack，然后構(gòu)建時運(yùn)行 npm run watch，可以看到watch已經(jīng)開始啟動了。

然后我們在hellowebpack.js文件中修改些內(nèi)容，發(fā)現(xiàn)watch也在跟蹤執(zhí)行，刷新下瀏覽器，就能看到變化。

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

第二種方式：

在webpack.config.js文件的配置根節(jié)點(diǎn)加上watch:true這一行就行了。

然后運(yùn)行npm run build也可以啟動監(jiān)聽。

這種方式跟上面本質(zhì)上是一樣，而且都要刷新一下瀏覽器，才能看到我們修改項目文件的效果。它其實是輪詢判斷文件的最后編輯時間是否變化，當(dāng)某個文件發(fā)生了變化，并不會立刻告訴監(jiān)聽者，而是先緩存起來，等aggregateTimeout時間過了再執(zhí)行。下面列出了開啟監(jiān)聽狀態(tài)下的watch配置，可以參考理解下。

module.export = {//默認(rèn)false，不開啟watch:true,//watch啟動時watchOptions才有效watchOptions: {//默認(rèn)為空，設(shè)置不監(jiān)聽的文件或者文件夾，支持正則匹配ignored: /node_modules/,//監(jiān)聽到變化發(fā)生后會等300ms再去執(zhí)行，默認(rèn)300ms aggregateTimeout:300, //設(shè)置輪詢文件是否變化時間，默認(rèn)每秒問1000次 poll:1000}}

那么問題來了，是否可以實現(xiàn)不用手動刷新瀏覽器更新？有辦法的，熱更新來了。

三、熱更新

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

wds無刷新瀏覽器

wds就是webpack-dev-server的簡稱，相比前面講的文件監(jiān)聽watch這種方式來說，這個方案本身不輸出文件，而是放在內(nèi)存中，性能更好。這個方案會用到HotModuleReplacementPlugin這個插件，屬于webpack的內(nèi)置插件。來看步驟：

安裝

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節(jié)點(diǎn)下的數(shù)組里

new webpack.HotModuleReplacementPlugin()

最后再添加一個與plugins同級的devServer配置，其中contentBase表示此熱更新打包是針對dist文件里的內(nèi)容，hot:true表示開啟了熱更新狀態(tài)。

devServer: {        contentBase: './dist',        hot: true    },

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

配置好之后，我們就來體驗一下效果，運(yùn)行

npm run dev

會看到它執(zhí)行了webpack-dev-server --open這個命令，如果看到類似這個頁面，表示這里打開的是dist目錄下文件列表。

選擇你的html頁面，我們來試下熱更新效果。在hellowebpack.js文件里修改內(nèi)容，

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

保存文檔，然后立即看瀏覽器，會發(fā)現(xiàn)頁面會自動刷新展示最新內(nèi)容，熱更新效果已經(jīng)實現(xiàn)了。

看完上述內(nèi)容，你們掌握webpack中如何進(jìn)行插件使用及熱更新打包的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！