详解webpack-dev-server使用方法

记录下@H_502_1@webpack-dev-server的用法.

首先，我们来看看基本的@H_502_1@webpack.config.js的写法

配置文件提供一个入口和一个出口，@H_502_1@webpack根据这个来进行@H_502_1@js的打包和编译工作。虽然@H_502_1@webpack提供了@H_502_1@webpack --watch的命令来动态监听文件的改变并实时打包，输出新@H_502_1@bundle.js文件，这样文件多了之后打包速度会很慢，此外这样的打包的方式不能做到@H_502_1@hot replace，即每次@H_502_1@webpack编译之后，你还需要手动刷新浏览器。

@H_502_1@webpack-dev-server其中部分功能就能克服上面的2个问题。@H_502_1@webpack-dev-server主要是启动了一个使用@H_502_1@express的@H_502_1@Http服务器。它的作用主要是用来伺服资源文件。此外这个@H_502_1@Http服务器和@H_502_1@client使用了@H_502_1@websocket通讯协议，原始文件作出改动后，@H_502_1@webpack-dev-server会实时的编译，但是最后的编译的文件并没有输出到目标文件夹，即上面配置的:

注意：你启动webpack-dev-server后，你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此很多同学使用webpack-dev-server进行开发的时候都看不到编译后的文件

下面来结合@H_502_1@webpack的文档和@H_502_1@webpack-dev-server里部分源码来说明下如何使用：

启动

启动@H_502_1@webpack-dev-server有2种方式：

通过@H_502_1@cmd line
通过@H_502_1@Node.js API

配置

我主要讲解下@H_502_1@cmd line的形式,@H_502_1@Node.js API形式大家去看下官方文档。可通过@H_502_1@npm script进行启动。我的目录结构是:

content-base

设定@H_502_1@webpack-dev-server伺服的@H_502_1@directory。如果不进行设定的话，默认是在当前目录下。

这个时候还要注意的一点就是在@H_502_1@webpack.config.js文件里面，如果配置了@H_502_1@output的@H_502_1@publicPath这个字段的值的话，在@H_502_1@index.html文件里面也应该做出调整。因为@H_502_1@webpack-dev-server伺服的文件是相对@H_502_1@publicPath这个路径的。因此，如果你的@H_502_1@webpack.config.js配置成这样的：

那么，在@H_502_1@index.html文件当中引入的路径也发生相应的变化:

<Meta charset="UTF-8"> Demo

Automatic Refresh

@H_502_1@webpack-dev-server支持2种自动刷新的方式：

Iframe mode
inline mode

这2种模式配置的方式和访问的路径稍微有点区别，最主要的区别还是@H_502_1@Iframe mode是在网页中嵌入了一个@H_502_1@iframe，将我们自己的应用注入到这个@H_502_1@iframe当中去，因此每次你修改的文件后，都是这个@H_502_1@iframe进行了@H_502_1@reload。

通过查看@H_502_1@webpack-dev-server的源码，@H_502_1@lib路径下的@H_502_1@Server.js文件，第38-48行，分别新建几个流，这几个流保存了@H_502_1@client文件夹下的相关文件：

// Prepare the live js file
var liveJs = new StreamCache();
fs.createReadStream(path.join(__dirname,"live.bundle.js")).pipe(liveJs);

// Prepare the inlined js file
var inlinedJs = new StreamCache();
fs.createReadStream(path.join(__dirname,"index.bundle.js")).pipe(inlinedJs);

// middleware for serving webpack bundle
this.middleware = webpackDevMiddleware(compiler,options);

app.get("/webpack_dev_server/live.bundle.js",function(req,res) {
res.setHeader("Content-Type","application/javascript");
liveJs.pipe(res);
});

app.get("/webpack-dev-server.js","application/javascript");
inlinedJs.pipe(res);
});

app.get("/webpack-dev-server/*","text/html");
this.livePage.pipe(res);
}.bind(this));

当使用@H_502_1@Iframe mode时，请求@H_502_1@/webpack-dev-server/index.html路径时，会返回@H_502_1@client/index.html文件，这个文件的内容就是：

不过@H_502_1@Iframe mode和@H_502_1@Inline mode最后达到的效果都是一样的，都是监听文件的变化，然后再将编译后的文件推送到前端，完成页面的@H_502_1@reload的。

Iframe mode

@H_502_1@Iframe mode下@H_502_1@cmd line不需要添加其他的内容，浏览器访问的路径是:localhost:8080/webpack-dev-server/index.html。

这个时候这个页面的@H_502_1@header部分会出现整个@H_502_1@reload消息的状态。当时改变源文件的时候，即可以完成自动编译打包，页面自动刷新的功能。

Inline mode

使用@H_502_1@inline mode的时候，@H_502_1@cmd line需要写成：

这个时候访问的路径是:@H_502_1@localhost:8080/index.html

也能完成自动编译打包，页面自动刷新的功能。但是没有的@H_502_1@header部分的@H_502_1@reload消息的显示，不过在控制台中会显示@H_502_1@reload的状态。

Hot Module Replacement

开启@H_502_1@Hot Module Replacement功能，在@H_502_1@cmd line里面添加@H_502_1@--hot

其他配置选项

--quiet 控制台中不输出打包的信息
--compress 开启gzip压缩
--progress 显示打包的进度

还有一切其他的配置信息可以查阅官方文档:

webpack-dev-server-cli

这是我的@H_502_1@package.json的文件：

css-loader": "^0.23.1","react": "^15.3.1","react-dom": "^15.3.1","style-loader": "^0.13.1","webpack": "^1.13.2","webpack-dev-server": "^1.14.1" } }

首先命令行：输入 @H_502_1@npm install 所有依赖。然后输入@H_502_1@npm run dev。在浏览器中打开localhost:8080/index.html，然后就可以愉快的开发咯。

本地搭建API Server

如果你在本地还启动了一个@H_502_1@api server,@H_502_1@port为3000,这个@H_502_1@server主要和你的前端应用进行数据交互。这个时候很显然会出现跨域的问题，那么这个时候，你前端应用的入口文件应当是用你自己启动的@H_502_1@api server提供的。

app.get('/',res) {
res.send('xxx/xxx/index.html'); //这个地方填写dist/index.html的路径
})

此外@H_502_1@webpack.config.js:

将@H_502_1@publicPath字段的内容配置为绝对路径。同时@H_502_1@index.html文件中对@H_502_1@js引用的路径也改为绝对路径

如果对@H_502_1@web-dev-server还有其他问题的话，请留言告知。

另外2篇关于@H_502_1@webpack的文章:

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。