首页 > tools > Bundler > webpack > > 正文

webpack外网访问设置—webpack-dev-server配置及跨域解决

发布人:zhoulujun@live.cn    点击:

从grunt 到gulp,然后再到,webpack,尼玛,这完全是个个坑货啊webpack 修改外网 ,不能访问,……让我怎么,测试啊在server js 里面起

从grunt 到gulp,然后再到,webpack,尼玛,这完全是个个坑货啊


webpack 修改外网 ,不能访问,……

让我怎么,测试啊


在server.js 里面 

起初是这样的……

/*eslint no-console:0 */
'use strict';
require('core-js/fn/object/assign');
//webpack模块
const webpack = require('webpack');
//webpack dev server,拥有实时加载特性的开发服务器
const WebpackDevServer = require('webpack-dev-server');
//根据env加载webpack.config.js
const config = require('./webpack.config');
//open a file or url in the user's preferred application
const open = require('open');
//根据config启动server
new WebpackDevServer(webpack(config), config.devServer)
.listen(config.port, 'localhost', (err) => {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:' + config.port);
  console.log('Opening your system browser...');
  open('http://localhost:' + config.port + '/webpack-dev-server/');
});


只需把ip地址改为:

0.0.0.0 即可

new WebpackDevServer(webpack(config), config.devServer)
.listen(config.port, '0.0.0.0', (err) => {
  if (err) {
    console.log(err);
  }
  console.log('Listening at localhost:' + config.port);
  console.log('Opening your system browser...');
  open('http://10.118.200.147:' + config.port + '/webpack-dev-server/');
});

webpack外网配置

关于跨域解决

new WebpackDevServer(webpack(config), {
  historyApiFallback: true,
  hot: true,//热加载
  hotOnly: true,
  overlay: {
    errors: true//webpack编译出现的错误是否会出现在网页中
  },
  compress: false,
  proxy: {
    '/api/*': {
      target: 'http://zhoulujun.cn/',//代理地址
      secure: false
    }
  }
})
  .listen(addressObj.port, addressObj.ip, function (error) {
    error && console.log(error);
    let address = `http://${addressObj.ip}:${addressObj.port}`;
    // let address=`http://localhost:13080`;
    open(address);
    console.log('listening at:' + address)
  });

这里面要提一点的是,接口,最好设计

system_A/api/a

system_B/api/a

前后端分离和 业务 反向代理,负载均衡 ,再nginx上门,直接依照路径转发即可。