詳解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"
這裡你將你的原始檔放在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»inline模式
inline模式下我們訪問的URL不用發生變化,啟用這種模式分兩種情況:
1 當以命令列啟動webpack-dev-server時,需要做兩點：
-
在命令列中新增
--inline命令 -
在
webpack.config.js中新增devServer:{inline:true}
2 當以Node.js API啟動webpack-dev-server時,我們也需要做兩點:
-
由於
webpack-dev-server的配置中無inline選項,我們需要新增webpack-dev-server/client?http://«path»:«port»/到webpack配置的entry入口點中. -
將
<script src="http://localhost:8080/webpack-dev-server.js"></script>新增到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);
在Node中執行上面的程式碼即可。
注意：webpack配置中的devSever配置項只對在命令列模式有效。
(Hot Module Replacement)熱模組替換
在命令列中執行inline模式，並啟用熱模組替換
這裡只需要多增加 --hot指令就OK了.如下所示.
webpack-dev-server --content-base build --inline --hot
注意:命令列模式下,webpack.config.js中一定要配置output.publicPath來指定編譯後的包(bundle)的訪問位置.
在Nodejs API中執行inline模式，並啟用熱模組替換
這裡需要做以下三點:
-
在
webpack.config.js的entry選項中新增:webpack/hot/dev-server -
在
webpack.config.js的plugins選項中新增:new webpack.HotModuleReplacementPlugin() -
在
webpack-dev-server的配置中新增：hot:true
webpack-dev-server中的配置選項
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();轉載：https://segmentfault.com/a/1190000006964335
相關推薦
詳解webpack-dev-server的使用
webpack-dev-server webpack-dev-server是一個小型的Node.js Express伺服器,它使用webpack-dev-middleware來服務於webpack的包,除此自外，它還有一個通過Sock.js來連線到伺服器的微型執行時.
webpack-dev-server啟動失敗
target href -s 失敗 http ima pack pac html 學習webpack-dev-server過程中，項目路徑下執行webpack-dev-server，老是報錯，原來是配置項在colors在webpack2.0以上版本不需要進行配置了，
webpack基礎+webpack配置文件常用配置項介紹+webpack-dev-server
建議 每次 alt fig out 添加 pre 補充 字符串 一.webpack基礎 1.在項目中生成package.json：在項目根目錄中輸入npm init，根據提示輸入相應信息。（也可以不生成package.json文件，但是package.json是很有用的
用webpack-dev-server開發時代理，決解開發時跨域問題
端口 dex lba save progress 重要 less span npm 一、設置代理的原因 現在對前端開發的要求越來越高，並且隨著自動化以及模塊化的 誕生，前後端開發模式越來越流行。後端只負責接口，前端負責數據展示、邏輯處理。但是前後端開發模式，有一個重要的問題
詳解webpack + vue + node 打造單頁面(入門篇)
nodejs 效果 註意 運行 gist -- images vue-cli webpack 1.node下載地址：http://nodejs.cn/download/，安裝完成檢查node和npm版本 2.淘寶鏡像 ： npm install cnpm -g
webpack-dev-server 無法通過ip訪問
color -s onf gre ogr uil class 生成 pts 使用Vue-cli生成的webpack腳手架，之前一直是可以通過本地ip + 端口來訪問的。今天忽然不可以，百度一下才知道缺少了host參數。 打開package.json。在.scripts.de
詳解webpack中的hash、chunkhash、contenthash區別
con tro 們的 tex trac extra lena fig files hash、chunkhash、contenthash hash一般是結合CDN緩存來使用，通過webpack構建之後，生成對應文件名自動帶上對應的MD5值。如果文件內容改變的話，那麽對應文件
'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序
解決 dev bsp blog log 再次 裝包 全局 pac 今天新初始的項目遇到這個問題，記錄如下： 1. 這個錯誤與全局安裝webpack-dev-server無關，不必進行全局安裝 2. 原因可能是： npm或yarn安裝包(當前項目)，安裝中報錯，例如nod
[轉] webpack3最新版本配置研究（五） devtool，webpack-dev-server，CommonsChunkPlugin
war () 最新版本 獲取 報錯 key num clas 容易 devtool devtool是webpack中config自帶的屬性只要使用就可以了不用安裝 webpack官網的解釋如下 當 webpack 打包源代碼時，可能會很難追蹤到錯誤和警告在源代碼中的原始位
webpack-dev-server配置指南webpack3.0
tput image led 替換 conf 朋友 div bundle 不知道 最近正在研究webpack，聽說webpack可以自己搭建一個小型的服務器（使用過vue-cli的朋友應該都見識到過），所以迫不及待的想要嘗試一下。不過，在實際操作中發現，用webpack搭建
Vue 項目： npm run dev b報錯 “'webpack-dev-server' 不是內部或外部命令，也不是可運行的程序 或批處理文件。”
output 安裝 modules RR module -i progress his dev 前提： 電腦已經安裝了nodeJS和npm, 項目是直接下載的zip包。 報錯步驟為1：cd /d 目錄； 2. npm ren dev -------> 報錯如下：
Vue項目碰到"‘webpack-dev-server’不是內部或外部命令，也不是可運行的程序或批處理文件"報錯
node fill sta 新建 sso 用戶權限 環境 fonts IT 最近公司裏做vue項目，svn了前端同事的項目代碼，裝好環境，運行項目（安裝步驟隨便百度一下，很詳細），控制臺裏報錯“‘webpack-dev-server’不是內部或外部命令，也不是可運行的程序或
webpack-dev-server 小記 原理介紹 概念解讀
style 事情 可能 asc 監聽文件 地址 dev ces 內容 使用 DevServer 提供 HTTP 服務而不是使用本地文件預覽 監聽文件的變化並自動刷新網頁，做到實時預覽 支持 Source Map，以方便調試 對於這些，Webpack 都為我們考慮好了。W
webpack之webpack-dev-server的使用
config bubuko ima 百度一 進入 自動打開 pda 監聽 電腦 本文的目的是要體驗下使用webpack服務器的熱更新和構建完成自動彈出瀏覽器的酷炫效果。 1、webpack及webpack-dev-server的安裝 全局安裝webpack，使用命令npm
關於webpack-dev-server不能及時更新的問題
tput output style 關於 腳本 class 不能 更新 瀏覽器 問題描述： 配置好了webpack-dev-server之後，修改文件，發現它可以重新編譯，但是瀏覽器頁面並沒有自動更新。 比如我在腳本裏新添了一句alert(1234), 雖然webpack-
vue中"‘webpack-dev-server’不是內部或外部命令，也不是可運行的程序"的報錯
ext watermark 描述 https 文件 程序 pac 解決辦法 ins 在vue項目中發現了這個報錯 解決辦法將項目裏的“node_modules”文件夾刪除，然後重新運行cnpm installvue中"‘webpack-d
webpack4 系列教程(十五)：開發模式與webpack-dev-server
作者按：因為教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步《webpack4 系列教程(十五)：開發模式與 webpack-dev-server》原文地址。更歡迎來我的小站看更多原創內容：godbmw.com，進行“姿勢”交流 ♪(^∇^*) 0. 課程介紹和資料 &g
webpack 4.x 解決 webpack-dev-server工具在webpack構建的專案中使用問題
首先將webpack-dev-server安裝到專案中 npm install webpack-dev-server -D 這時在powershell中敲 webpack-dev-server 會發現 'webpack-dev-server' 不是內部或外部命令，也不是可執行的程式 或批
webpack 4.x 解決 webpack-dev-server工具在webpack構建的項目中使用問題
運行 shel pts class col png 技術 style 發現 首先將webpack-dev-server安裝到項目中 npm install webpack-dev-server -D 這時在powershell中敲 webpack-dev-server
webpack-dev-server.js:405 throw e;
一開始裝webpack建議先裝低一點版本，所以npm i -D [email protected] 裝了個3.12版本的,然後裝了webpack-dev-server 配置如下： { "name": "WebPack", "version": "1.0.0", "descr