webpack-dev-server使用詳解（附程式碼）
這次帶給大家webpack-dev-server使用詳解（附程式碼），webpack-dev-server使用的注意事項有哪些，以下就是實戰案例，一起來看一下。
webpack-dev-server
webpack-dev-server是一個小型的Node.js Express伺服器,它使用webpack-dev-middleware來服務webpack的套件,除此自外，它還有一個透過Sock.js來連接到伺服器的微型執行時間.
我們來看一下下面的設定檔(webpack.config.js )
var path = require("path");
module.exports = {
entry:{
app:["./app/main.js"]
},
output:{
path:path.resolve(dirname,"build"),
publicPath:"/assets/",
filename:"bundle.js"
}
}這裡你將你的來源檔案放在app資料夾下,並透過webpack將其打包到build資料夾下的bundle.js中.
注意:webpack-dev -server是一個獨立的NPM套件,你可以透過npm install webpack-dev-server來安裝它.
基本目錄
webpack-dev-server預設會以當前目錄為基本目錄,除非你制定它.
webpack-dev-server --content-base build/
上述命令是在命令行中執行的,它將build目錄作為根目錄.有一點需要注意的是:webpack-dev-server生成的包並沒有放在你的真實目錄中,而是放在了內存中.
我們在基本目錄下新建一個index.html檔,然後在瀏覽器中輸入http://localhost: 8080訪問.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="assets/bundle.js"></script> </body> </html>
自動刷新
webpack-dev-server支援兩種模式來自動刷新頁面.
iframe模式(頁面放在iframe中,當改變時重載)
inline模式(將webpack-dev-sever的客戶端入口新增至套件(bundle))
兩種模式都支援熱模組替換(Hot Module Replacement).熱模組替換的好處是只替換更新的部分,而不是頁面重載.
iframe模式
使用這種模式不需要額外的配置,只需要以下面這種URL格式訪問即可
http://«host»:«port»/webpack-dev-server/« path»
例如:http://localhost:8080/webpack-dev-server/index.html.
inline模式
##inline模式下我們訪問的URL不用發生變化,啟用這種模式分兩種情況:1 當以命令列啟動webpack-dev-server時,需要做兩點：- #在命令列中加入--inline指令
- 在webpack.config.js中加入devServer:{inline:true}
- 由於webpack-dev-server的配置中無inline選項,我們需要加入webpack-dev-server/client?http://«path»:«port»/到webpack配置的entry入口點.
- 將加入到html檔案中
var config = require("./webpack.config.js");
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
contentBase:'build/',
publicPath: "/assets/"
});
server.listen(8080);命令列模式有效。
(Hot Module Replacement)熱模組替換
在命令列運行inline模式，並啟用熱模組替換這裡只需要多增加--hot指令就OK了.如下所示.webpack-dev-server --content-base build --inline --hot
- 在webpack.config. js的entry選項中新增:webpack/hot/dev-server
- 在webpack.config.js的plugins選項中新增:new webpack.HotModuleReplacementPlugin()
- #在webpack-dev-server的設定中加入：hot:true
var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");
var compiler = webpack({
// configuration
});
var server = new WebpackDevServer(compiler, {
// webpack-dev-server options
contentBase: "/path/to/directory",
// Can also be an array, or: contentBase: "http://localhost/",
hot: true,
// Enable special support for Hot Module Replacement
// Page is no longer updated, but a "webpackHotUpdate" message is send to the content
// Use "webpack/hot/dev-server" as additional module in your entry point
// Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does.
// Set this as true if you want to access dev server from arbitrary url.
// This is handy if you are using a html5 router.
historyApiFallback: false,
// Set this if you want to enable gzip compression for assets
compress: true,
// Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
// Use "**" to proxy all paths to the specified server.
// This is useful if you want to get rid of 'http://localhost:8080/' in script[src],
// and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).
proxy: {
"**": "http://localhost:9090"
},
setup: function(app) {
// Here you can access the Express app object and add your own custom middleware to it.
// For example, to define custom handlers for some paths:
// app.get('/some/path', function(req, res) {
// res.json({ custom: 'response' });
// });
},
// pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
staticOptions: {
},
// webpack-dev-middleware options
quiet: false,
noInfo: false,
lazy: true,
filename: "bundle.js",
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
// It's a required option.
publicPath: "/assets/",
headers: { "X-Custom-Header": "yes" },
stats: { colors: true }
});
server.listen(8080, "localhost", function() {});
// server.close();以上是webpack-dev-server使用詳解（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
解決win7驅動程式碼28的方法
Dec 30, 2023 pm 11:55 PM
有的用戶在安裝設備的時候遇到了錯誤，提示錯誤代碼28，其實這主要是由於驅動程式的原因，我們只要解決win7驅動程式碼28的問題就可以了，下面就一起來看一下應該怎麼來操作吧。 win7驅動程式碼28怎麼辦：首先，我們需要點擊螢幕左下角的開始選單。接著，在彈出的選單中找到並點擊“控制面板”選項。這個選項通常位於選單的底部或附近。點擊後，系統會自動開啟控制面板介面。在控制面板中，我們可以進行各種系統設定和管理操作。這是懷舊大掃除關卡中的第一步，希望對大家有幫助。然後，我們需要繼續操作，進入系統和
藍色畫面代碼0x0000001怎麼辦
Feb 23, 2024 am 08:09 AM
藍屏代碼0x0000001怎麼辦藍屏錯誤是電腦系統或硬體出現問題時的一種警告機制，代碼0x0000001通常表示出現了硬體或驅動程式故障。當使用者在使用電腦時突然遇到藍色畫面錯誤，可能會感到驚慌失措。幸運的是，大多數藍色畫面錯誤都可以透過一些簡單的步驟來排除和處理。本文將為讀者介紹一些解決藍屏錯誤代碼0x0000001的方法。首先，當遇到藍色畫面錯誤時，我們可以嘗試重
電腦頻繁藍屏而且每次代碼不一樣
Jan 06, 2024 pm 10:53 PM
win10系統是一款非常優秀的高智慧系統強大的智慧可以為使用者帶來最好的使用體驗，一般正常的情況下使用者的win10系統電腦都不會出現任何的問題！但在優秀的電腦也難免會出現各種故障最近一直有小伙伴們反應自己的win10系統遇到了頻繁藍屏的問題！今天小編就為大家帶來了win10電腦頻繁藍屏不同代碼的解決方法讓我們一起來看看吧。電腦頻繁藍屏而且每次代碼不一樣的解決辦法：造成各種故障碼的原因以及解決建議1、0×000000116故障原因：應該是顯示卡驅動不相容。解決建議：建議更換廠商原帶驅動。 2、
GE通用遠端程式碼可在任何裝置上編程
Mar 02, 2024 pm 01:58 PM
如果您需要遠端編程任何設備，這篇文章會為您帶來幫助。我們將分享編程任何設備的頂級GE通用遠端代碼。通用電氣的遙控器是什麼？ GEUniversalRemote是一款遙控器，可用於控制多個設備，如智慧電視、LG、Vizio、索尼、藍光、DVD、DVR、Roku、AppleTV、串流媒體播放器等。 GEUniversal遙控器有各種型號，具有不同的功能和功能。 GEUniversalRemote最多可以控制四台設備。頂級通用遙控器代碼，可在任何裝置上編程GE遙控器配備一組代碼，使其能夠與不同設備配合。您可
如何使用Copilot產生程式碼
Mar 23, 2024 am 10:41 AM
身為一名程式設計師，對於能夠簡化程式設計體驗的工具，我感到非常興奮。借助人工智慧工具的幫助，我們可以產生演示程式碼，並根據需求進行必要的修改。在VisualStudioCode中新引入的Copilot工具讓我們能夠創建具有自然語言聊天互動的AI生成程式碼。透過解釋功能，我們可以更好地理解現有程式碼的含義。如何使用Copilot產生程式碼？要開始，我們首先需要取得最新的PowerPlatformTools擴充。要實現這一點，你需要進入擴充頁面，搜尋“PowerPlatformTool”，然後點擊Install按鈕
解決代碼0xc000007b錯誤
Feb 18, 2024 pm 07:34 PM
終止代碼0xc000007b在使用電腦時，有時會遇到各種各樣的問題和錯誤代碼。其中，終止代碼最為令人困擾，尤其是終止代碼0xc000007b。這個程式碼表示某個應用程式無法正常啟動，給用戶帶來了不便。首先，我們來了解終止碼0xc000007b的意思。這個程式碼是Windows作業系統的錯誤代碼，通常發生在32位元應用程式嘗試在64位元作業系統上執行時。它表示應
詳解0x0000007f藍屏代碼的原因及解決方案
Dec 25, 2023 pm 02:19 PM
藍屏是我們在系統使用的時候常常會碰到的問題，根據錯誤代碼的不同，會有很多中不一樣的原因和解決方法。例如我們在使用時遇到stop：0x0000007f的問題，可能是硬體或軟體錯誤，下面就跟著小編一起來看看解決方法吧。 0x000000c5藍色畫面代碼原因：答：記憶體、CPU、顯示卡突然超頻，或軟體運作錯誤。解決方法一：1.開機時不斷按F8進入，選擇安全模式，回車進入。 2.進入安全模式後，按win+r開啟運行窗口，輸入cmd，回車。 3.在指令提示窗口，輸入“chkdsk/f/r”，回車，然後按y鍵。 4、
學習Python繪圖的速成指南：繪製冰墩墩的程式碼實例
Jan 13, 2024 pm 02:00 PM
快速上手Python繪圖：畫出冰墩墩的程式碼範例Python是一種簡單易學且功能強大的程式語言，透過使用Python的繪圖庫，我們可以輕鬆實現各種繪圖需求。在本篇文章中，我們將使用Python的繪圖庫matplotlib來畫出冰墩墩的簡單圖形。冰墩墩是一隻擁有可愛形象的熊貓，非常受小朋友的喜愛。首先，我們需要安裝matplotlib函式庫。你可以透過在終端運行
