14 Webpack Dev Server 本地开发服务

webpack-dev-server

提供了一个简单的 web server 并且具有live reloading(实时重新加载) 功能

**

安装与使用

安装 **
npm install --save-dev webpack-dev-server

修改配置文件，告知 dev server 从什么位置查找文件
webpack.config.js**

 module.exports = {
  devServer: {
    contentBase: './dist',
    compress: true,
    port: 9000 //指定端口
  },
 };

以上配置告知 webpack-dev-server 将dist 目录下的文件 serve 到 localhost:8080

运行
npx webpack-dev-server

可以在 package.json 指定脚本

"scripts": {
    "dev": "webpack-dev-server --config webpack.config.js"
  },

分析
执行 命令 之后，它会读取 webpack 的配置文件（默认是webpack.config.js) ，然后将文件打包到内存中（所以看不到dist文件夹的生成，webpack会打包到硬盘上），这时候打开server 的默认地址 ： localhost:8080 就可以看到文件目录或页面 （默认是显示 index.html 没有则显示目录）

注意版本问题（webpack webpack-cli）会导致报错

Cannot find module 'webpack/bin/config-yargs'

"devDependencies": {
  "webpack": "^4.30.0",
  "webpack-cli": "^3.3",
  "webpack-dev-server": "^3.8.0"
}

自动刷新

• iframe模式：页面被放到一个iframe内，当发生变化时，会重新加载
• inline模式：将webpack-dev-server 的重载添加到产出的bundle 中

使用方式： webpack-dev-server --hot --inline 是开启 inline 模式的自动刷新。
**

模块热替换

hot module replacement 或 HMR

**

proxy

在实际开发中，，本地开发服务器是不能直接请求线上数据接口的，这是因为浏览器的同源安全策略导致的跨域问 题，我们可以使用 devServer.proxy 来解决本地开发跨域的问题。

下面的配置是将页面访问的/api所有请求都转发到了 baidu.com 上，那么，我们请求 /api/users 则会被转发到 http://baidu.com/api/users 线上地址

module.exports = {
    devServer:{
      proxy:{
        '/api':'http://baidu.com'
    }    
  }
}

高级属性
**

• pathRewrite

重写路径，将 /api/users 转发到 http://baidu.com/users

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://baidu.com',
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

解析：^/api 是一个正则表达式
'^/api' 应该拆分成 '^' 和 '/api' 两个字符串，其中 '^' 匹配的是字符串最开始的位置。

也就是说，axios 的请求URL写成了 '/api/myAPI/path' 的话，最后会在经过 http-proxy-middleware 的代理服务器时，会变成 '/myAPI/path' ，然后代理到 http://localhost:8080 这个代理服务器下面。

• changeOrigin

设置为true,本地就会虚拟一个服务器接收你的请求并代你发送该请求

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
            }
        }
    }
};

• 支持 https

默认情况下，不接受运行在https上，且使用了无效证书的后端服务器
secure:false

• bypass

不想代理所有请求，可以基于一个函数的返回值绕过代理

例如：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理

module.exports = {
  //...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                bypass: function(req, res, proxyOptions) {
                    if (req.headers.accept.indexOf('html') !== -1) {
                        console.log('Skipping proxy for browser request.');
                        return '/index.html';
                    }
                }
            }
        }
    }   
};

• context

多个路径代理到同一个target下，可以使用数组

module.exports = {
    //...
    devServer: {
        proxy: [{
            context: ['/auth', '/api'],
            target: 'http://localhost:3000',
        }]
    }
};

• 自定义中间件

devServer.before devServer.after
自定义中间件在开发中常用来做 mock server 使用

http://localhost:9000/api/mock.json

module.exports = {
    //...
    devServer: {
        port: 9000,
        before(app, server) {
            app.get('/api/mock.json', (req, res) => {
                res.json({
                    hello: 'world'
                })
            })
        }
    }
};

• devServer.compress

服务开启Gzip压缩

文章 https://segmentfault.com/a/1190000016314976