文档章节

启用多个服务器的webpack配置

o
 osc_w9s1w4o0
发布于 2019/03/29 11:53
字数 654
阅读 17
收藏 0

精选30+云产品,助力企业轻松上云!>>>

  在前端开发工作中会遇到一个前端开发者与多个后端开发者进行接口联调,按照默认webpack的配置无法同时启用多个前端服务,这样来回改动webpack配置来切换启动前端服务给工作带来很多不便,鉴于提高工作效率,可以对webpack进行一下配置来接解决上面这个问题。

  首先将config/index.js中dev的host设置为 ' ';

  代码如下:

 1 module.exports = {
 2   dev: {
 3     // Paths
 4     env: require('./dev.env'),
 5     autoOpenBrowser: true,
 6     assetsSubDirectory: 'static',
 7     assetsPublicPath: '/',
 8     proxyTable: {
 9     },
10     host: '', 
11     port: 8090, 
12   },
13 
14   build: {
15   },
16   cssSourceMap: false
17 
18 }

  然后在package.json中添加需要启用的端口号;

  代码如下:

{
  "name": "szrbelement",
  "version": "1.0.0",
  "description": "a backstage templates for picc",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js",
    "dev_163": "SET PORT=10163 && SET TARGET=http://58.1.1.163/ && npm run dev",
    "dev_151": "SET PORT=10151 && SET TARGET=http://58.1.1.151/ && npm run dev",
    "dev_169": "SET PORT=10151 && SET TARGET=http://58.1.1.169/ && npm run dev", 
    "start": "npm run dev",
    "build": "node build/build.js"
  },
}

  最后在build/webpack.dev.config.js中引入os模块获取本地ip地址(方便项目移植到不同pc终端运行),替换代理目标;

  代码如下:

  'use strict'
  const utils = require('./utils')
  const webpack = require('webpack')
  const config = require('../config')
  const merge = require('webpack-merge')
  const path = require('path')
  const baseWebpackConfig = require('./webpack.base.conf')
  const CopyWebpackPlugin = require('copy-webpack-plugin')
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
  const portfinder = require('portfinder')

//引入os模块
const os = require('os')

  const HOST = process.env.HOST
  const PORT = process.env.PORT && Number(process.env.PORT)

// 获取代理目标
const TARGET = process.env.TARGET
if(TARGET){
 config.dev.proxyTable['/项目上下文'].target=TARGET
}
// 获取网卡IP
var interfaces = os.networkInterfaces();
var localIPAddress = "";
var interfaces = os.networkInterfaces();
for (var devName in interfaces) {
    var iface = interfaces[devName];
    for (var i = 0; i < iface.length; i++) {
        var alias = iface[i];
        if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
            localIPAddress = alias.address;
            break;
        }
    }
    if (localIPAddress) break;
}
localIPAddress = localIPAddress || "127.0.0.1"


const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host || localIPAddress,    //更改获取ip地址的优先级
    port: PORT || config.dev.port,    //
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,    
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

  接下来我们可以在vs code终端执行npm run dev_163来启动服务,还可以利用dos命令同时启动多个服务,在项目文件下新建startall.bat文件,文件内容如下:

start /b npm run dev_163
start /b npm run dev_151
start /b npm run dev_169

 

  如有任何疑问或有指正的地方欢迎在下方留言,非常感谢!

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Pycharm文件打开方式

Pycharm修改文件默认打开方式 新下载了一个Pycharm,建了个小demo,期间产生了一个sqlite3文件,由于是第一次打开,就弹出选择打开方式的对话框,手一块直接点了个Text,然后就乱码了: 那我...

osc_fi9eaftu
25分钟前
8
0
微信域名检测中反应速度的重要性

随着微信域名检测的普及,越来越多的人重视这方面有个客户是这样跟我说的,他现在用的那个检测有频率限制 最快只能一秒检测一个, 并发多的时候是不能边跳转边检测的, 只能写到计划任务里面...

mkapi01
26分钟前
18
0
状压dp大总结1 [洛谷]

前言 状态压缩是一种\(dp\)里的暴力,但是非常优秀,状态的转移,方程的转移和定义都是状压\(dp\)的难点,本人在次总结状压dp的几个题型和例题,便于自己以后理解分析状态和定义方式 状态压缩...

osc_s28jz759
27分钟前
17
0
aspnet core 2.1中使用jwt从原理到精通一

目录 原理; 根据原理使用C#语言,生成jwt; 自定义验证jwt; 使用aspnetcore 中自带的类生成jwt; 学有所得 了解jwt原理; 使用C#轻松实现jwt生成和验证 原理 jwt对所有语言都是通用的,只要...

osc_1ls4yaq1
28分钟前
11
0
github上DQN代码的环境搭建,及运行(Human-Level Control through Deep Reinforcement Learning)conda配置

最近师弟在做DQN的实验,由于是强化学习方面的东西,正好和我现在的研究方向一样于是我便帮忙跑了跑实验,于是就有了今天的这个内容。 首先在github上进行搜寻,如下图: 发现第一个星数最多...

osc_252iaxru
29分钟前
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部