Webpack4 学习笔记七跨域服务代理

webpack 小插件使用
webpack 监听文件变化配置
webpack 处理跨域问题

Webpack 小插件使用

clean-webpack-plugin: 用于在生成之前删除生成文件夹的Webpack插件
copy-webpack-plugin: 将单个文件或整个目录复制到生成目录
webpack.BannerPlugin内置插件: 给输出的文件头部插入注释信息

安装:
npm i clean-webpack-plugin copy-webpack-plugin --save-dev

webpack配置:

   const CleanWebpackPlugin = require('clean-webpack-plugin')
   const CopyWebpackPlugin = require('copy-webpack-plugin')
   const webpack = require('webpack')
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'app.js',
       path: path.resolve(__dirname, 'dist')
     },
     plugins: [
       new CleanWebpackPlugin('./dist'), // 也就是 output.path对应的目录, 相对路径
       new CopyWebpackPlugin([
         {
           from: './doc', // 从哪个文件夹copy内容
           to: './'  // copy到哪里, 默认为输出目录
         }
       ]),
       new webpack.BannerPlugin('⌚author: qiqingfu'), // 会将这段内容插入到打包后的js文件最前面
     ]
   }

webpack 监听文件变化配置

webpack 可以监听文件变化, 当它们重新修改后会重新编译。
启用 watch 模式, 它是一个 boolean类型的值, 默认为 false。当设置为 true, webpack将监听任何已解析文件的更改。
也可以使用 watchOptions来配置watch模式的选项。

module.exports = {
  // watch: true,  开启监听文件变化 
  watchOptions: {
    aggregateTimeout: 1000, // 节流, 你这个文件修改后的一秒后,再进行构建 
    poll: 1000, // 每秒检查一次变动 
    ignored: /node_modules/ // 排除node_modules,监听大量文件系统会占用更多的CPU和内容消耗
  }
}

webpack 处理跨域问题

所谓同源是指，域名，协议，端口相同。任何一者不同都会产生跨域。

假如:
前端服务为 http: //localhost:8080
后端的连调服务器为: http://192.163.21.1:8082

前端请求后端提供的接口, 由于域名和端口不同。所产生跨域的现象。

除了别的解决跨域的方式以外, 在webpack中也可以解决跨域的苦恼。

webpack.proxy 启用代理服务器。
webpack 中的钩子函数中自己mock数据
在服务端启用 webpack

webpack.proxy 启用代理服务器

后端服务: http://localhost:3000

const express = require('express')
const app = express()
app.get('/qy/user', (req, res) => {
 console.log(req.url)
 res.json({
   name: 'qiqingfu',
   age: 21,
   job: 'web',
   city: 'QingDao'
 })
})
app.listen(3000,'localhost', () => {
 console.warn('port open success: 3000')
})

前端请求:

xhr.open('GET', '/api/qy/user', true)

xhr.onload = function () {
  console.log(xhr.response)
}
xhr.send()

webpack配置proxy代理

devServer: {
    contentBase: './dist',
    progress: true,
    compress: true,
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: {"^/api": ""} // 将/api重写为""空字符串
      }
    }
  }

凡是接口以 /api开头的请求,都将其代理到后端的服务器上。http://localhost:3000。

pathRewrite: {"^/api": ""}, 再将 /api重写掉。什么意思呢? 因为后端的接口为 /qy/user,我们用 /api开头只是为了统一管理, 如果不把/api重写掉,那发给后端的请求是 /api/qy/user,和后端的接口不匹配。会出问题的。

通过 webpack.devServer 的钩子函数, mock数据

webpack配置
before: 提供在服务器内部所有其他中间件之前执行自定义中间件的能力

   devServer: {
       contentBase: './dist',
       progress: true,
       compress: true,
       port: 8080,
       before: app => {
         app.get('/api/qy/user', (req, res) => {
           res.json({name: 'mock'})
         })
       }
     }

在服务端启用 webpack

需要weebpack插件: webpack-dev-middleware

server端配置:

const express = require('express')
const app = express()
const middle = require('webpack-dev-middleware')
const webpack = require('webpack')
const config = require('./webpack.config')

const comiler = webpack(config)

app.use(middle(comiler))

app.get('/qy/user', (req, res) => {
  res.json({
    name: 'qiqingfu',
    age: 21,
    job: 'web',
    city: 'QingDao'
  })
})

app.listen(3000,'localhost', () => {
  console.warn('port open success: 3000')
})

然后启动服务的时候会后续启动 webpack, 直接访问 http://localhost:3000, 可直接访问到数据