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) } }}
哈哈哈哈哈哈,当你看到这里的时候,你应该想多理解点,其实官网文档都有点我都有