• home > tools > Bundler > webpack >

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

    Author:zhoulujun@live.cn Date:

    从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上门,直接依照路径转发即可。



    转载本站文章《webpack外网访问设置—webpack-dev-server配置及跨域解决》,
    请注明出处:https://www.zhoulujun.cn/html/tools/Bundler/webpack/2016_0809_7876.html