home > tools > Bundler > webpack >

webpack外網訪問設置—webpack-dev-server配置及跨域解決

author:[email protected]    hits:

從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配置及跨域解決》, 請注明出處:http://www.qsexmk.tw/html/tools/Bundler/webpack/2016_0809_7876.html