webpack4知识整理（六）-跨域处理、resolve、环境变量的配置、多线程打包

最新推荐文章于 2023-03-15 10:02:16 发布

chouzhui1892

最新推荐文章于 2023-03-15 10:02:16 发布

阅读量714

点赞数

文章标签： webpack json 前端 ViewUI

原文链接：https://my.oschina.net/u/3996596/blog/3044727

版权

如果想要跨域请求，需要在webpack配置文件加入proxy（代理）
这里我们通过express框架进行简单配置一个服务文件名（server.js）

const express =require('express')

let  app=express()

app.get('/api/user',(req,res)=>{
  res.json({"name":"good boy"})
})
app.listen(9000)

node server.js

这里我们开启了一个服务监听端口号9000
webpack-dev-server默认端口号是8080，所以请求是需要解决跨域问题的，但是服务端没有处理，需要在webpack进行代理
上边的服务监听了/api/user，所以我们对/api接口的请求代理到有服务的域下，这样就可以正常请求了

  devServer:{
    proxy:{
      '/api':'http://localhost:9000'
    }
  },

如果服务端，处理的api不是以/api开头的方式进行处理，需要在webpack的proxy重写请求api

  devServer:{
    proxy:{
      '/api':{
        target:'http://localhost:9000',
        pathRewrite:{'/api':''}
      }
    }
  },

target:为请求域
pathRewrite:将开发模块中的以/api请求的接口，去掉/api进行代理请求

通过以上方式可以进行跨域处理了

如果想在前端模拟像后端进行请求（应用场景为：在后端还没开发好，前端模拟调试）

  devServer:{
    before(app){
      app.get('/user', (req, res) => {
        res.json({ "name": "good boy --- before" })
      })
    }
  },

webpack-dev-server提供了一个钩子函数，在这里用来模拟

还有一种方式是通过在服务器端处理需要使用插件webpack-dev-middleware
这里把实现代码写出来，感觉在开发中几乎不会遇到这种情况（下边是server.js文件配置需要和webpack.config.js同目录）

const express =require('express')
const webpack = require('webpack')
const middle = require('webpack-dev-middleware')
let  app=express()

let config = require('./webpack.config.js')

let compile=webpack(config)

app.use(middle(compile))

app.get('/user',(req,res)=>{
  res.json({"name":"good boy"})
})
app.listen(9000)

测试 node server.js执行这个express服务
通过访问localhost：9000 来调试

resolve在webpack中的作用
可以配置别名，方便在引入时简化处理

  resolve:{
    alias:{
      '别名':'需要简化的路径'
    }
  },

如果引入时，不写后缀名，默认找 .js 文件，在这里配置之后，可以对其他后缀名的文件按顺序查找并引入

  resolve:{
    alias:{
      '别名':'需要简化的路径'
    },
    extensions:['.js','.css','.less']
  },

alias : 配置别名
extensions ：对引入的文件可以不写后缀名

这里我们对环境变量进行配置
需要在plugins属性中加入webpack.DefinePlugin插件

plugins:[
    ... ...
    new WebPack.DefinePlugin({
      DEV:JSON.stringify('dev')
    })
  ],

这样配置之后，就可以在打包的模块中使用DEV属性了，但是有几点注意

如果是字符串的话需要使用JSON.stringify('value')来处理
如果是其他值可以直接在引号中输入

  plugins:[
    ... ...
    new WebPack.DefinePlugin({
      DEV:JSON.stringify('dev'),
      version:'1'
    })
  ],

在js模块中进行测试

let url = ''
if (DEV === 'dev') {
  url = 'http://localhost:8080'
} else {
  url = 'https://www.xianshang.com'
}

console.log(url)

此时已经按照预期结果打印了出来

开发和上线还可以区分两个不同的webpack配置文件，在根目录下，新建两个文件webpack.production.js和webpack.development.js文件
然后将两个模式下的公共配置在webpack.basic.js中
通过webpack-merge来和生产环境和开发环境的webpack配置文件进行合并

let {smart} = require('webpack-merge')
let basic = require('./webpack.basic.js')

module.exports = smart(basic,{
  mode:'production'
})

这样配置之后在package.json里面进行配置

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

这样生产环境和开发环境就可以分别配置

多线程打包，使用happypack插件完成

 ... ...
  plugins:[
    ... ...
    new Happypack({
      id:css,
      use: ['style-loader', 'css-loader']
    })

  ],
  module:{
    rules:[
      {test:/\.css$/,use:'Happypack/loader?id=css'}
    ]
  }