webpack（六）搭建本地服务器及代理配置

webpack提供了一个可选的本地开发服务器，基于node.js搭建，内部使用express框架，让浏览器自动刷新修改后的结果。

一、webpack-dev-server

（1）安装

npm install --save-dev webpack-dev-server

（2）在webpack.config.js中配置

配置文件如下：

module.exports = {
    entry: __dirname + '/main.js',
    output: {
        path: __dirname + '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './', //本地服务器所加载的页面所在的目录
        host: '192.168.1.158', //本地IP地址
        colors: true, //终端输出结果为彩色
        historyApiFallback: true, //不跳转
        inline: true, //实时刷新
        port: '3333', //端口号
        open: true  // 启动打开浏览器
 
    }
}

配置参数说明：

• contentBase : 默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录。

• port ：设置默认监听端口，如果省略，默认为”8080″

• inline : 设置为true，当源文件改变时会自动刷新页面

• colors ： 设置为true，使终端输出的文件为彩色的

• historyApiFallback ：在开发单页时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

• host ： 主机地址，如果是开发本机搭建，需要使用本机IP地址，否则会报错。

• open: 是否打开浏览器，默认值flase

• compress: 是否为静态文件开启gzip compression ，默认false 可设置为true

• 

（3）在package.json中进行配置

"serve":"webpack serve --config webpack.config.js"

（4）运行打包

npm run serve

二、 proxy 代理

在实际项目中不可避免会遇到跨越问题，webpack中的proxy就是解决前端跨域的方法之一。
跨越问题：协议、域名、端口 三者只要有一个与服务端的不一致，就会报跨域错误

（1）配置：

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/',  // 代理地址
        pathRewrite: {'^/api' : ''}, // 路径重写
        changeOrigin: true,     // target是域名的话，需要这个参数，
        secure: false,          // 设置支持https协议的代理
      },
      '/api2': {
          .....
      }
    }
  }
};

（2）配置的参数说明

• '/api'

捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，
比如：API请求/api/users, 会被代理到请求 http://www.baidu.com/api/users 。

• target

代理的API地址，就是需要跨域的API地址。
地址可以是域名,如：http://www.baidu.com
也可以是IP地址：http://127.0.0.1:3000
如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败。

• pathRewrite

路径重写，也就是说会修改最终请求的API路径。
比如访问的API路径：/api/users,
设置pathRewrite: {'^/api' : ''},后，
最终代理访问的路径：http://www.baidu.com/users，
这个参数的目的是给代理命名后，在访问时把命名删除掉。

• changeOrigin

这个参数设置为 true 可以让 target 参数是域名

• secure

secure: false,不检查安全问题。
设置后，可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器

三、websocket的代理及使用

// webpack.config.js
proxy: {
      '/socket/**': {
        target: 'wss://10.10.3.41:8443',
        ws: true,
        secure: false,
        logLevel: 'debug',
      },
    }
// main.js
new WebSocket('ws://localhost:8080/socket/dashboard')