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条中