DevServer

該文檔主要描述關(guān)于devserver的相關(guān)配置。(配置同webpack-dev-middleware兼容)

devServer(Object類型)

該配置會(huì)被webpack-dev-server使用，并從不同方面做定制。
下面是一個(gè)例子，使用gzips提供對(duì)dist/文件夾下內(nèi)容的訪問(wèn)。

devServer: {
contentBase: path.join(__dirname, "dist"),//對(duì)外提供的訪問(wèn)內(nèi)容的路徑
compress: true,//是否啟用gzip壓縮
port: 9000//提供訪問(wèn)的端口
}

當(dāng)server運(yùn)行后，在請(qǐng)求時(shí)會(huì)打印如下內(nèi)容

http://localhost:9000/
webpack result is served from /build/
content is served from dist/

打印出來(lái)的內(nèi)容會(huì)顯示，server在監(jiān)聽什么端口，提供的服務(wù)來(lái)來(lái)源于內(nèi)容(如來(lái)源于dist文件夾)。
如果以Node.js API的方式使用dev-server，則devServer中的配置將會(huì)被忽略。
需要將設(shè)置的options作為第二個(gè)參數(shù)進(jìn)行傳遞new WebpackDevServer(compiler,{...})通過(guò)Node.js API進(jìn)行配置的內(nèi)容參見此處

devServer.clientLogLevel(String 類型)

當(dāng)使用inline mode，devTools的命令行中將會(huì)顯示一些調(diào)試信息，
如：before loading，before an error 或 Hot Module Replacement被啟用。
這類調(diào)試信息，可能會(huì)讓輸出變得比較亂。
可以通過(guò)如下設(shè)置禁止顯示上述的調(diào)試信息。

clientLogLevel: "none"

其中的值可以是none,error,warning或info。
如果不設(shè)置默認(rèn)的log level 為info。
注意console一致都會(huì)顯示bundle error和warning。上面的配置只對(duì)log級(jí)別低的message有效。

devServer.compress(boolean 類型)

對(duì)所有請(qǐng)求啟用gzip壓縮

compress: true

devServer.contentBase(boolean string array類型)

設(shè)置server對(duì)外服務(wù)的內(nèi)容來(lái)源，只有在提供靜態(tài)文件訪問(wèn)的情況下才需要使用該配置。
devServer.publicPath會(huì)被用來(lái)設(shè)置提供bundles文件的位置，而且會(huì)優(yōu)先考慮該配置的路徑。
默認(rèn)情況下會(huì)使用當(dāng)前運(yùn)行命令的文件夾作為內(nèi)容源，可以使用如下配置對(duì)此進(jìn)行更改。

contentBase: path.join(__dirname, "public")

注意：建議使用絕對(duì)路徑，不要使用相對(duì)路徑
可以定義多個(gè)文件夾提供數(shù)據(jù)源。

contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]

禁止使用contentBase可以做如下設(shè)置

contentBase: false

devServer.filename(String)

該配置可以配置成lazy mode來(lái)減少便宜，lazy modee模式下默認(rèn)會(huì)在每次請(qǐng)求時(shí)，
進(jìn)行一次便宜。使用filename,可以設(shè)置當(dāng)請(qǐng)求某個(gè)指定的文件時(shí)，才執(zhí)行編譯。
如果output.filename被設(shè)置位bundle.js并且filename如下使用,
則僅僅會(huì)在請(qǐng)求bundle.js時(shí)，進(jìn)行編譯。

lazy: true,
filename:"bundle.js"

如果是設(shè)置filename而不設(shè)置lazy mode，則不會(huì)有任何效果。

devServer.headers(object)

像所有的請(qǐng)求添加headers

headers: {
  "X-Custom-Foo": "bar"
}

devServer.historyApiFallback(boolean object)

當(dāng)使用html5 history api,將會(huì)在響應(yīng)404時(shí)返回index.html。想要開啟該功能進(jìn)行如下設(shè)置。

historyApiFallback: true

通過(guò)傳遞一個(gè)object來(lái)對(duì)該共呢個(gè)做更多的定制。

historyApiFallback: {
  rewrites: [
    { from: /^\/$/, to: '/views/landing.html' },
    { from: /^\/subpage/, to: '/views/subpage.html' },
    { from: /./, to: '/views/404.html' }
  ]
}

當(dāng)在路徑中使用.符號(hào)，需要使用disableDotRule配置。

historyApiFallback: {
  disableDotRule: true
}

關(guān)于此處更多的信息，參考connect-history-api-fallback文檔.

devServer.host(string 該配置只能用于CLI)

指定使用的host。默認(rèn)情況下是localhost.
如果希望server被外部訪問(wèn)，需要向下面來(lái)制定。

host: "0.0.0.0"

devServer.hot(boolean)

啟用webpack的Hot Module Replacement特性。

hot: true

devServer.hotOnly(boolean 只適用于CLI)

啟用Hot Module Replacement，當(dāng)編譯失敗時(shí)，不刷新頁(yè)面。

hotOnly:true

devServer.https(boolean object)

默認(rèn)情況下dev-server使用http協(xié)議，通過(guò)配置可以支持https
https: true
通過(guò)該配置，會(huì)使用自簽名的證書，同樣可以自定義簽名證書。

https: {
  key: fs.readFileSync("/path/to/server.key"),
  cert: fs.readFileSync("/path/to/server.crt"),
  ca: fs.readFileSync("/path/to/ca.pem"),
}

該對(duì)象的配置項(xiàng)會(huì)直接傳遞給Node.js的HTTPS模塊。
更多內(nèi)容參見 HTTPS documentation .

devServer.inline(boolean 只適用于CLI)

切換dev-server的兩種模式，默認(rèn)情況server使用inline mode。
這種情況下，live reload及構(gòu)建信息的相關(guān)代碼會(huì)被插入到bundle中。
另外一種模式位iframe mode.使用iframe mode會(huì)在通知欄下方
顯示構(gòu)建信息，切換到iframe mode可以使用下方配置。

inline: false

使用Hot Module Replacement時(shí)，建議使用inline mode。

devServer.lazy(boolean)

當(dāng)啟用lazy.dev-server會(huì)僅在請(qǐng)求時(shí)進(jìn)行編譯。
這意味著webpack不會(huì)監(jiān)控文件改變，所以稱該模式為lazy mode.
開啟lazy模式如下。
lazy: true

當(dāng)在lazy模式下，watchOptions將不會(huì)被啟用
如果在CLI下使用，需要確保inline mode被禁用

devServer.noInfo(boolean)

啟用noInfo，類似webpack bundle啟動(dòng)或保存的信息將會(huì)被隱藏，Errors和warnings仍會(huì)被顯示。
noInfo: true

devServer.overlay(boolean object)

在瀏覽器上全屏顯示編譯的errors或warnings。
默認(rèn)是關(guān)閉的。如果只想顯示編譯錯(cuò)誤。則如下配置

overlay: true

如果既想顯示erros也想顯示warnings，則如下配置

overlay: {
    warnings: true,
    errors:true
}

devServer.port(number 只適用于CLI)

指定服務(wù)監(jiān)聽的端口

port: 8080

devServer.proxy(object)

未來(lái)保證在同一域名下，請(qǐng)求一些在其他域名下的api接口時(shí)會(huì)用到該配置。
dev-server使用http-proxy-middleware包。
當(dāng)服務(wù)運(yùn)行于localhost:3000時(shí)，可以使用如下配置啟用代理。

proxy: {
  "/api": "http://localhost:3000"
}

對(duì)/api/users的請(qǐng)求將會(huì)通過(guò)代理請(qǐng)求到http://localhost:3000/api/users.
如果不想將/api傳遞過(guò)去，需要重寫path:

proxy: {
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {"^/api" : ""}
  }
}

默認(rèn)情況下如果請(qǐng)求的服務(wù)是https的，并且證書是未認(rèn)證的的，則該錯(cuò)未認(rèn)證證書默認(rèn)是無(wú)法使用的。如果想要使用該證書。則需要進(jìn)行如下配置，關(guān)閉安全檢測(cè)。

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    secure: false
  }
}

有時(shí)，不希望代理所有請(qǐng)求，可以像bypass屬性傳遞一個(gè)function來(lái)實(shí)現(xiàn)該需求。
在function中，可以獲取到request，response以及proxy options。
該function必須返回false或返回被部署的文件路徑，而不是繼續(xù)去代理請(qǐng)求。

例子，對(duì)于瀏覽器的請(qǐng)求，只希望提供html網(wǎng)頁(yè)的訪問(wèn)，而對(duì)于api請(qǐng)求，
則將請(qǐng)求代理到指定服務(wù)。

proxy: {
  "/api": {
    target: "http://localhost:3000",
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf("html") !== -1) {
        console.log("Skipping proxy for browser request.");
        return "/index.html";
      }
    }
  }
}

devServer.public(string CLI only)

當(dāng)使用inline mode并代理到dev-server。內(nèi)鏈的客戶端代碼不知道應(yīng)該訪問(wèn)哪個(gè)域名。
他將會(huì)基于window.location來(lái)鏈接服務(wù)器，但是如果這樣做有問(wèn)題，
則需要使用public配置。
例子：dev-server被代理到nginx中配置的myapp.test

public: "myapp.test:80"

devServer.publicPath(string)

打包的文件將被部署到該配置對(duì)應(yīng)的path。
假設(shè)server運(yùn)行在http://localhost:8080而output.filename設(shè)置位bundle.js.
默認(rèn)情況下publicPath為/,所以最終生成的bundle文件可以通過(guò)如下路徑訪問(wèn)。
http://localhost:8080/bundle.js.
publicPath更改為一個(gè)文件夾

publicPath: "/assets/"

最終的生成文件的訪問(wèn)路徑為http://localhost:8080/assets/bundle.js.

publicPath的值，前后必須包含斜杠

也可以使用完整的url進(jìn)行制定，如果使用HMR則必須使用該種寫法。

publicPath: "http://localhost:8080/assets/"

最終的生成文件仍然通過(guò)http://localhost:8080/assets/bundle.js進(jìn)行訪問(wèn)。

建議將devServer.publicPath同output.publicPath配置成相同值

devServer.quiet(boolean)

當(dāng)啟用該配置，除了初始化信息會(huì)被寫到console中，其他任何信息都不會(huì)被寫進(jìn)去。
errors和warnings也不會(huì)被寫到console中。

quiet: true

devServer.setup(function)

通過(guò)該function可以訪問(wèn)Express app對(duì)象，添加自定義的middleware。
舉例，為某個(gè)路徑添加自定義處理

setup(app){
  app.get('/some/path', function(req, res) {
    res.json({ custom: 'response' });
  });
}

devServer.staticOptions

能夠?qū)νㄟ^(guò)contentBase配置部署的靜態(tài)文件進(jìn)行高級(jí)配置。
具體配置查看Express文檔

staticOptions: {
  redirect: false
}

注意，該配置僅當(dāng)contentBase配置為string時(shí)起作用

devServer.stats(string object)

針對(duì)bundle打印的信息進(jìn)行精確控制。
使用場(chǎng)景為，當(dāng)只想看一些想看到的信息，而不想看到所有的打印信息，
這種情況下，使用quiet或noInfo是不合適的，因?yàn)檫€希望關(guān)注一部分信息。
此種場(chǎng)景下就需要使用stats來(lái)控制日志內(nèi)容的輸出。

stats有一些可用的預(yù)設(shè)值

示例:只顯示bundle中的errors

stats: "errors-only"

stats提供了很多細(xì)力度的對(duì)日志信息的控制。可以詳細(xì)指定希望打印的信息。

stats: {
  // Add asset Information
  assets: true,
  // Sort assets by a field
  assetsSort: "field",
  // Add information about cached (not built) modules
  cached: true,
  // Add children information
  children: true,
  // Add chunk information (setting this to `false` allows for a less verbose output)
  chunks: true,
  // Add built modules information to chunk information
  chunkModules: true,
  // Add the origins of chunks and chunk merging info
  chunkOrigins: true,
  // Sort the chunks by a field
  chunksSort: "field",
  // Context directory for request shortening
  context: "../src/",
  // `webpack --colors` equivalent
  colors: true,
  // Add errors
  errors: true,
  // Add details to errors (like resolving log)
  errorDetails: true,
  // Add the hash of the compilation
  hash: true,
  // Add built modules information
  modules: true,
  // Sort the modules by a field
  modulesSort: "field",
  // Add public path information
  publicPath: true,
  // Add information about the reasons why modules are included
  reasons: true,
  // Add the source code of modules
  source: true,
  // Add timing information
  timings: true,
  // Add webpack version information
  version: true,
  // Add warnings
  warnings: true
};

當(dāng)配置了quiet或noInfo時(shí)，該配置不起作用

devServer.watchContentBase(boolean)

設(shè)置server監(jiān)控通過(guò)devServer.contentBase設(shè)置的文件。
在文件改變時(shí)會(huì)進(jìn)行頁(yè)面刷新，默認(rèn)情況下該配置是禁止的。

watchContentBase: true

devServer.watchOptions(object)

對(duì)文件更改的監(jiān)控配置。
webpack基于文件系統(tǒng)來(lái)獲取文件的改變。在某些場(chǎng)景下，是不起作用的。
比如，當(dāng)使用NFS或Vagrant。針對(duì)這種情況使用polling進(jìn)行監(jiān)控。

watchOptions: {
  poll: true
}

如果該操作對(duì)于文件系統(tǒng)來(lái)說(shuō)消耗比較大，可以設(shè)置在一定的間隔時(shí)間內(nèi)出發(fā)一次。
更多的配置參見WatchOptions