devServer
通过 webpack-dev-server 的这些配置,可能以多种形式扭转其行为。这是一个根本的示例,利用 gzips 压缩 dist/ 目录当中的所有内容并提供一个本地服务 (serve):
devServer: {contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
}
参数阐明
devServer: {
// 提供动态文件目录地址
// 基于 express.static 实现
contentBase: path.join(__dirname, "dist"),
// 将此项配置设置为 true 时,将会跳过 host 查看。这是不举荐的因为不查看 host 的利用容易受到 DNS 从新绑定攻打
disableHostCheck:true,
// 在所有响应中增加首部内容
headers: {"X-Custom-Foo": "bar"},
// 当启用 lazy 时,dev-server 只有在申请时才编译包 (bundle)。这意味着 webpack 不会监督任何文件改变。咱们称之为“惰性模式”lazy:true,
// 任意的 404 响应都被代替为 index.html
// 基于 node connect-history-api-fallback 包实现
historyApiFallback: true,
// 是否所有服务都启用 gzip 压缩
// 基于 node compression 包实现
compress: true,
// 是否暗藏 bundle 信息
noInfo: true,
// 产生谬误是否笼罩在页面上
overlay: true,
// 是否开启热加载
// 必须搭配 webpack.HotModuleReplacementPlugin 能力齐全启用 HMR。// 如果 webpack 或 webpack-dev-server 是通过 --hot 选项启动的,那么这个插件会被主动增加
hot: true,
// 热加载模式
// true 代表 inline 模式,false 代表 iframe 模式
inline: true, // 默认是 true
// 是否主动关上
open: true,
// 设置本地 url 和端口号
host: 'localhost',
port: 8080,
// 代理
// 基于 node http-proxy-middleware 包实现
proxy: {
// 匹配 api 前缀时,则代理到 3001 端口
// 即 http://localhost:8080/api/123 = http://localhost:3001/api/123
// 留神: 这里是把以后 server8080 代理到 3001,而不是任意端口的 api 代理到 3001
'/api': 'http://localhost:3001',
// 设置为 true, 本地就会虚构一个服务器接管你的申请并代你发送该申请
// 次要解决跨域问题
changeOrigin: true,
// 针对代理 https
secure: false,
// 覆写门路:http://localhost:8080/api/123 = http://localhost:3001/123
pathRewrite: {'^/api' : ''},
// 输入本次代理申请的日志信息
bypass: function (req, res, proxyOptions) {console.log(proxyOptions.target)
}
}
}
哈哈哈哈哈哈,当你看到这里的时候,你应该想多理解点,其实官网文档都有点我都有