web-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文件夹下的初始化入口文件，并打包成build.js文件到build文件夹。

webpack-dev-server可以通过NPM命令安装

$ npm install webpack-dev-server.

当前目录

webpack-dev-server会默认会指定当前目录为基本目录，除非你指定了基本目录。

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

使用当前命令，webpack-dev-server将会服务于静态文件到build文件夹。服务器将会监听源文件，无论何时文件改变，都将重新编译。

被修改的包将会从内存中保存到在publicPath指定的相对目录中，这个将不会被输出到指定的output目录中。如果一个包已经存在于同一URL路径中，则内存中的包优先.

使用上述这种配置，包能够在以下路径中找到，localhost:8080/assets/bundle.js。

加载你的包文件，你需要在你指定的静态文件夹build中创建一个index.html文件(--content-base option)，以下是例子

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

posted @ 2017-01-14 01:38 halapro.liu 阅读(1613) 评论(0) 编辑收藏举报

刷新页面返回顶部

web-dev-server配置

Iframe mode

公告