|
|
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条中
|
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-12-8 14:43:02
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡