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

  • 如果想要跨域请求,需要在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':''}
      }
    }
  },
  1. target:为请求域
  2. 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']
  },
  1. alias : 配置别名
  2. extensions :对引入的文件可以不写后缀名

 

  • 这里我们对环境变量进行配置

  • 需要在plugins属性中加入webpack.DefinePlugin插件

plugins:[
    ... ...
    new WebPack.DefinePlugin({
      DEV:JSON.stringify('dev')
    })
  ],
  • 这样配置之后,就可以在打包的模块中使用DEV属性了,但是有几点注意

  1. 如果是字符串的话需要使用JSON.stringify('value')来处理
  2. 如果是其他值可以直接在引号中输入
  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)

81927271d6af1cee27b04ba4cc3929e826d.jpg

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

 

  • 开发和上线还可以区分两个不同的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'}
    ]
  }
  • 这里一css打包为例,其他文件打包也是这样处理

  • 将rules中原有的loader用Happypack/loader?id=css的方式替换掉

  • 在Happypack插件中在进行配置,在插件中使用的loader是原来的use中的loader

1ac42caf9457f953d0a629d6bb7ae52631c.jpg

转载于:https://my.oschina.net/u/3996596/blog/3044727

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值