使用插件的網(wǎng)頁包;并構(gòu)建本地服務(wù)器。

　　使用插件

　　橫幅插件

　　網(wǎng)包附帶了橫幅廣告，我們只需要在網(wǎng)包中配置它.js：

　　網(wǎng)頁包插件

　　以前，我們的索引.html位于項(xiàng)目的根目錄中，此文件也應(yīng)打包在末尾的 dist 文件夾中。

　　可以自動(dòng)生成一個(gè)索引.html與捆綁包.js到 dist 文件夾中。

　　但是，默認(rèn)情況下，此生成的文件沒有模板(只有導(dǎo)入的js)，因此我們需要對(duì)其進(jìn)行配置：

　　在此之后，webpack 將轉(zhuǎn)到 webpack.config.js所在的文件夾，以查找索引.html文件(原始條目文件)，并使用其 html 結(jié)構(gòu)作為新索引.html的模板。也就是說，初始條目文件僅提供一個(gè)模板。

　　注意：

　　另請(qǐng)注意，正如我們之前所說，webpack認(rèn)為索引.html位于dist中，因此路徑是錯(cuò)誤的。我們通過配置輸出.公共路徑或網(wǎng)址加載程序.選項(xiàng).公共路徑來解決此問題。但是現(xiàn)在索引.html確實(shí)在dist中，以便我們也可以將這兩個(gè)配置更改回去。

　　uglifyjs-webpack-plugin

　　壓縮 js 文件：

　　要配置：

　　此處再次報(bào)告由于版本不匹配而導(dǎo)致的錯(cuò)誤。原因是webpack@3對(duì)應(yīng)的插件版本是@1，所以如果npm在安裝過程中沒有指定版本，則默認(rèn)安裝最新的@2版本。打包后將報(bào)告錯(cuò)誤。

　　百達(dá)構(gòu)建本地服務(wù)器

　　安裝

　　Webpack提供了一個(gè)可選的本地開發(fā)服務(wù)器，基于節(jié)點(diǎn).js構(gòu)建，內(nèi)部使用express框架，可以實(shí)現(xiàn)熱更新。

　　文件被緩沖到內(nèi)存中，內(nèi)存中的讀取速度比從磁盤讀取的速度快得多，然后在執(zhí)行打包命令時(shí)將其輸出到磁盤。

　　首先，安裝它：

　　注意：另請(qǐng)注意，它對(duì)應(yīng)于此處的 webpack 版本。

　　然后配置它：

　　處理錯(cuò)誤

　　此時(shí)，直接運(yùn)行 webpack-dev-服務(wù)器將報(bào)告錯(cuò)誤：

　　這里的操作是嘗試在項(xiàng)目根目錄中執(zhí)行webpack-dev-server.cmd，但當(dāng)前目錄中沒有這樣的東西，因此報(bào)告了錯(cuò)誤。此時(shí)，您可能有以下想法：

　　(1)首先，webpack-dev-server.cmd 位于node_modules/.bin文件夾中。我可以選擇直接執(zhí)行node_modules/.bin/webpack-dev-server，也可以選擇cd到目錄中執(zhí)行它，如下所示：

　　這個(gè)想法應(yīng)該沒問題，但是當(dāng)我這樣做時(shí)，我得到一個(gè)錯(cuò)誤：

　　經(jīng)過深思熟慮。好吧，犯了一個(gè)愚蠢的錯(cuò)誤：

　　注意上面的圖片!!!路徑用 \ 而不是 / . . . 編寫使用\ 后正常

　　(2)第二種方法，全局安裝 web 包-開發(fā)-服務(wù)器。這當(dāng)然是沒有問題的。在這種情況下，無論我在哪個(gè)路徑中運(yùn)行命令，始終可以找到該命令。但由于版本沖突，不建議使用此方法。

　　(3)第三種方法是轉(zhuǎn)到包.json 并配置命令：

　　之后，執(zhí)行npm運(yùn)行dev，然后底層的npm腳本會(huì)做一些相應(yīng)的處理，自動(dòng)進(jìn)入node_modules/.bin文件夾查找相應(yīng)的cmd并執(zhí)行。

　　更新速度慢

　　打開本地服務(wù)器，修改代碼后，你會(huì)發(fā)現(xiàn)它可以自動(dòng)刷新。但。。。

　　當(dāng)我到達(dá)這一點(diǎn)時(shí)，我發(fā)現(xiàn)刷新大約需要4到5秒。與使用實(shí)時(shí)服務(wù)器時(shí)的即時(shí)刷新感覺相比，它根本不是一個(gè)數(shù)量級(jí)。然后刪除以前安裝的 uglifyjs-webpack-插件是正常的，它似乎受此插件的影響。

　　這里也可以發(fā)現(xiàn)，其實(shí)我們只需要在開發(fā)完成后，用這個(gè)插件來壓縮代碼;相反，webpack-dev-server是在開發(fā)過程中使用的，也就是說，這兩件事的使用場(chǎng)景是不同的。那么，有沒有辦法根據(jù)使用上下文將它們分開呢？

　　配置分離

　　提取常用配置

　　開發(fā)環(huán)境配置和生產(chǎn)環(huán)境配置的分離

　　在我們之前安裝的插件中，webpack-dev-server只能在開發(fā)過程中使用，uglifyjs-webpack-插件只能在開發(fā)后使用，其他的則在開發(fā)/生產(chǎn)期間使用。基于此，我們可以在根目錄中創(chuàng)建一個(gè)新的構(gòu)建文件夾，并將這些配置寫入三種類型的文件中：

　　dev.config.js/prod.config.js/base.config.js

　　正式分離后，方便我們管理，然后在插件的幫助下將配置合并：

　　dev.config.js ：

　　prod.config.js ：

　　base.config.js ：

　　在此之后，我們必須解決兩個(gè)問題：

　　首先，當(dāng)前的配置文件已被分離，因此可以刪除原始的webpack.config.js。在這里，我們會(huì)發(fā)現(xiàn)刪除后，最初配置的npm腳本命令無效，因此請(qǐng)轉(zhuǎn)到pack.json進(jìn)行配置：

　　添加 — 配置.js，即配置文件 base.config.js現(xiàn)在占上風(fēng)。

　　第二個(gè)問題，如果我們直接打包，我們會(huì)發(fā)現(xiàn)dist文件夾是在構(gòu)建下輸出的，因?yàn)槲覀冎跋襁@樣配置了 output.path：

　　在__dirname指向 webpack.config.js所在的目錄之前，即根目錄，后跟 dist，這意味著打包到根目錄下的 dist 文件夾中。現(xiàn)在，__dirname指向 base.config.js所在的目錄，即構(gòu)建文件夾，后跟 dist，這意味著在構(gòu)建下打包的 dist 文件夾。

　　因此，要修復(fù)路徑，請(qǐng)更改為：

　　然后你可以正常打包。當(dāng)然，對(duì)于小型項(xiàng)目，一個(gè)配置文件也完全夠用。