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

Webpack4 學習筆記七 跨域服務代理