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, 可直接訪問到數據

筆記地址