配置DevServer
前面我们只是简单的让webpack可以简单的运行起来，在实际的项目中，需要：
支持
HTTP，而不是file。监听文件的变化，自动刷新，可以做到实时预览页面。
支持
Source Map，网代码更为方便的调试。
简单使用
安装
需要全局安装webpack-dev-server
$ npm i -g webpack-dev-server在进行本地的安装webpack-dev-server
$ npm i webpack-dev-server -D执行命令webpack-dev-server ，会显示
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
⚠ ｢wdm｣: Hash: 1276dc831679ecdee331因为使用的webpack|v4.x，后面需要添加
--mode=development
这就意味着DevServer在在监听localhost:8080/的端口，服务器会一直在后台持续运行，访问的是该目录下的index.html
DevServer 会把 Webpack 构建出的文件保存在内存中，在要访问输出的文件时，必须通过 HTTP 服务访问。
devServer.host
DevServer.host配置项用于配置DevServer 服务器的监听地址，只能通过命令行进行参数的配置。默认是127.0.0.1。
$ webpack-dev-server --host 0.0.0.0devServer.port
DevServer默认开启的8080 端口，我们可以通过修改配置文件，来进行端口的修改。
module.exports = {
// ......
devServer: {
port: 7777
},
module: {/*....*/}
};打开http://localhost:9000/ 就可以看到网页了。
devServer.historyApiFallback
当404 自动跳转回首页
module.exports = {
// ......
devServer: {
port: 7777,
historyApiFallback: true,
},
module: {/*....*/}
};devServer.noInfo
让命令中少一些输出
module.exports = {
// ......
devServer: {
port: 7777,
noInfo: true,
},
module: {/*....*/}
};实时预览
试着修改文件entry.js, module.js, style.css 这三个文件中的任意一个文件，页面会进行实时刷新预览。
通过DevServer启动的webpack会自动打开监听模式，当文件发生变化的时候，重新执行构建后在去通知DevServer。DevServer会让webpack在构建出的JS代码里面注入一个代理客户端用于控制网页，网页和DevServer直接会通过webpack协议通信，用来方便DevServer主动向客户端发送命令。DevServer在收到来自webpack的文件变化通知时，通过注入客户端控制网页刷新。
如果更改index.html文件，页面不会有任何变化的，也没有触发实时预览的机制。因为webpack在启动的时候，是配置里面的entry的入口文件去进行解析，只有entry本身，及其依赖的文件，才会被webpack添加到监听的列表中。
注意：通常设置好
webpack-dev-server服务自动刷新预览功能之后，发现手机预览不了，其实是由于webpack-pack-server服务安全机制导致的，只允许本机访问，我们可以把host设置为0.0.0.0就可以允许或者设置为本机地址。
devServer.inline
DevServer用于配置是否将这个代理客户端自动注入将运行在页面中的Chunk里，默认自动注入。DevServer会根据是否开启inline来调整网页的自动刷新策略。
开启
devServer.inline，则DevServer会在构建完变化后的代码通过代理客户端控制网页刷新。关闭
devServer.inline，则DevServer无法直接控制要开发的网页。会通过iframe的方式去运行要开发的网页。
想要使用DevServer的模块热替换机制去实现实时预览，最方便的方法就是开启inline
module.exports = {
// ......
devServer: {
port: 7777,
inline: true
},
module: {/*....*/}
};devServer.historyApiFallback
对于单页面程序，浏览器的brower histroy可以设置成html5 history API/hash，而设置为html5 API的，如果刷新浏览器会出现404 not found，原因是它通过这个路径（比如： /activities/2/ques/2）来访问后台，所以会出现404，而把historyApiFallback设置为true那么所有的路径都执行index.html。
module.exports = {
// ......
devServer: {
port: 7777,
inline: true,
historyApiFallback: {
// 使用正则匹配命中路由
rewrites: [
// user 开头的返回user.html
{from: /^\/user/, to: '/user.html'},
// game 开头的返回game.html
{from: /^\/game/, to: '/game.html'},
// 其他的返回index.html
{from: /./, to: '/index.html'}
]
},
},
module: {/*....*/}
};DevServer.proxy
启用proxy，来解决前端的跨域问题。
module.exports = {
// ......
devServer: {
// ......
// 代理到后端的接口
proxy: {
// 只有/api开头的请求地址，才会被代理
// 如果请求地址是 /test/home,这种不以/api开头的，是不会被代理的
// 示例： /api/logout, 最终会变成 http://api.xxx.com/v1/logout
"/api/*": {
// 目标服务器地址
target: "http://127.0.0.1:7001/api/v1",
// 目标服务器地址是否是安全协议
secure: false,
// 是否修改来源, true时-->让目标服务器以为是webpack-dev-server发出的请求
changeOrigin: true,
// '/api/login' => target + '/login'
// 将/api开头的请求地址, /api 改为 /, 即 /api/xx 改为 /xx
pathRewrite: { "^/api": "/" }
},
// 启用热替换属性
hot: true,
// 使用颜色
colors: true,
},
},
};devServer.allowedHosts
devServer.allowedHosts 可以进行配置白名单，只有HTTP请求的HOST在列表里的才可以正常的返回。
module.exports = {
// ......
devServer: {
port: 7777,
inline: true,
allowedHosts: [
'.host.com',
'.host2.com'
]
},
module: {/*....*/}
};devServer.https
const fs = require('fs');
module.exports = {
// ......
devServer: {
port: 7777,
inline: true,
https: {
key: fs.readFileSync('/path/to/server.key'),
cert: fs.readFileSync('/path/to/server.crt'),
ca: fs.readFileSync('/path/to/ca.pem'),
}
},
module: {/*....*/}
};模块热替换
模块热替换就是在不重新加载整个网页的情况下，通过将被更新过的模块替换老的模块，在进行执行，实现实时预览。
模块热替换默认是关闭的，使用--hot参数，就可以使用。
支持 Source Map
在浏览器运行的JS代码都是编译输出的代码，可读性比较差。不管是开发环境还是正式环境，我们都希望可以定位到bug的源代码的具体位置。都可以通过调试工具Source Map 映射代码，可以在源代码进行断点调试。
webpack生成Source Map是需要使用--devtool source-map 参数。或着通过配置文件。
module.exports = {
// ......
devServer: {/*....*/},
devtool: 'source-map',
module: {/*....*/}
};Source Map在Chrome 浏览器的开发者工具，在 Sources 栏中看到可调试的源代码。
Last updated