转载：webpack之devServer配置

最新推荐文章于 2024-05-12 21:27:07 发布

B21C

最新推荐文章于 2024-05-12 21:27:07 发布

阅读量400

点赞数

webpack 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

webpack 4.0

4 篇文章 0 订阅

订阅专栏

珠峰培训

2 篇文章 0 订阅

订阅专栏

DevServer 是webpack开发服务器。

首先，下载webpack-dev-server库

$ npm i -D webapck-dev-server

配置package.json：

配置webpack.config.js

当运行npm run dev的时候，devServer首先会在内存中创建类似的dist目录，在由浏览器打开进行预览。

webpack-dev-server其它配置

在DevServer第一次构建完成时，自动用浏览器打开网页，默认是true

open: true

配置项用于打开指定 URL 的网页。

openPage: '/different/page'

同样也可以配置package.json:

启用 webpack 的模块热替换特性。DevServer默认的行为是在发现源代码被更新后会通过自动刷新整个页面来做到实现预览，开启模块热替换功能后在不刷新整个页面的情况下通过用心模块替换老模块来实现实时预览。

hot: true

devServer.host 配置项用于配置DevServer服务器监听的地址。

如果你想要局域网中其他设备访问你本地的服务，可以在启动的时候带上：--host 0.0.0.0，也就是在我们的package.json中配置：

我的IP地址是：10.10.42.3。那么像上图这样配置后，

局域网内其它机器需要访问：10.10.42.3:8080 。

本机访问：10.10.42.3:8080 或者 localhost:8080 或者 127.0.0.1:8080

当您有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url 。看例子。


     
     
       
       
        
        
       
       
       
       
        
        
         
         proxy: {
        
        
       
       

       
       
        
        
       
       
       
       
        
            
         
         '/proxy': {
        
        
       
       

       
       
        
        
       
       
       
       
        
                
         
         target: 
         
         'http://your_api_server.com',
        
        
       
       

       
       
        
        
       
       
       
       
        
                
         
         changeOrigin: 
         
         true,
        
        
       
       

       
       
        
        
       
       
       
       
        
                
         
         pathRewrite: {
        
        
       
       

       
       
        
        
       
       
       
       
        
                    
         
         '^/proxy': 
         
         ''
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
                 }
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
         }

假设你主机名为 localhost:8080 , 请求 API 的 url 是 http：//your_api_server.com/user/list
'/proxy'：如果点击某个按钮，触发请求 API 事件，这时请求 url 是http：//localhost:8080/proxy/user/list 。
changeOrigin：如果 true ，那么 http：//localhost:8080/proxy/user/list 变为 http：//your_api_server.com/proxy/user/list 。但还不是我们要的 url 。
pathRewrite：重写路径。匹配 /proxy ，然后变为'' ，那么 url 最终为 http：//your_api_server.com/user/list 。

This option allows you to whitelist services that are allowed to access the dev server.

devServer.allowedHosts 配置一个白名单列表，只有HTTP请求的HOST在列表里才正常返回，使用如下：


     
     
       
       
        
        
       
       
       
       
        
        
         
         allowedHosts: [
        
        
       
       

       
       
        
        
       
       
       
       
        
          
         
         '.host.com',
        
        
       
       

       
       
        
        
       
       
       
       
        
          
         
         'subdomain.host.com',
        
        
       
       

       
       
        
        
       
       
       
       
        
          
         
         'subdomain2.host.com',
        
        
       
       

       
       
        
        
       
       
       
       
        
          
         
         'host2.com'
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
         ]

Mimicking django's ALLOWED_HOSTS, a value beginning with . can be used as a subdomain wildcard. .host.com will match host.com, www.host.com, and any other subdomain of host.com.

.host.com 将匹配 host.com 和 *.host.com

配置是否启用 gzip 压缩。boolean 为类型，默认为 false。