web-dev-server配置

時間 2019-12-14

標籤 web dev server 配置欄目 HTML 简体版

原文原文鏈接

webpack-dev-server是一個小型的Node.js Express服務器,它使用webpack-dev-middleware來服務於webpack的包,除此自外，它還有一個經過Sock.js來鏈接到服務器的微型運行時.javascript

配置(webpack.config.js):html

var path = require("path");
module.exports = {
  entry: {
    app: ["./app/main.js"]
  },
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    filename: "bundle.js"
  }
};

你有一個app文件夾下的初始化入口文件，並打包成build.js文件到build文件夾。java

webpack-dev-server能夠經過NPM命令安裝webpack

$ npm install webpack-dev-server.

當前目錄web

webpack-dev-server會默認會指定當前目錄爲基本目錄，除非你指定了基本目錄。npm

$ webpack-dev-server --content-base build/

使用當前命令，webpack-dev-server將會服務於靜態文件到build文件夾。服務器將會監聽源文件，不管什麼時候文件改變，都將從新編譯。瀏覽器

被修改的包將會從內存中保存到在publicPath指定的相對目錄中，這個將不會被輸出到指定的output目錄中。若是一個包已經存在於同一URL路徑中，則內存中的包優先.bash

使用上述這種配置，包可以在如下路徑中找到，localhost:8080/assets/bundle.js。服務器

加載你的包文件，你須要在你指定的靜態文件夾build中建立一個index.html文件(--content-base option)，如下是例子app

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script src="assets/bundle.js"></script>
</body>
</html>

在默認配置下，前往localhost:8080/來啓動你的應用，配置中的資源目錄，前往localhost:8080/assets。

自動刷新

webpack-dev-server支持多種模式來自動刷新頁面：

iframe mode（頁面被嵌入一個iframe而且在改變時重載）
inline mode（一個小型的webpack-dev-server客戶端入口被添加到包中，當頁面改變時自動刷新）

　每一個模式都支持Hot Module Replacement.在Hot Module Replacement中，包會通知改變發生，Hot Module Replacemen將會加載更新的模塊而且注入到運行的應用程序中。

Iframe mode

使用iframe mode不須要更多的配置，只須要跳轉到

http://«host»:«port»/webpack-dev-server/«path».

根據上述配置：http://localhost:8080/webpack-dev-server/index.html.

配置不須要更改
好的信息條在應用程序上方
URL改變不會反射到瀏覽器的URL條上

Inline mode

使用inline mode，也須要：

指定--inline在命令行中
指定devserver: {inline: true}在webpack.config.js

這將添加webpack-dev-server客戶端入口到webpack配置中。這不必在url中改變，只須要跳轉到http://«host»:«port»/«path».

根據上述配置：http://localhost:8080/index.html.

必須配置option或者命令行flag
日誌狀態打印在控制檯和瀏覽器的控制檯中
URL改變反射到瀏覽器的URL條中

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。