webpack外网访问设置—webpack-dev-server配置及跨域解决
Author：[email protected] Date：
从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/');
});
关于跨域解决
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