webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外,它还有一个通过Sock.js来连接到服务器的微型运行时.

我们来看一下下面的配置文件(webpack.config.js)

var path = require("path");
module.exports = {
entry:{
app:["./app/main.js"]
},
output:{
path:path.resolve(__dirname,"build"),
publicPath:"/assets/",
filename:"bundle.js"
}
}

  

这里你将你的源文件放在app文件夹下,并通过webpack将其打包到build文件夹下的bundle.js中.

注意:webpack-dev-server是一个独立的NPM包,你可以通过npm install webpack-dev-server来安装它.

基本目录

webpack-dev-server默认会以当前目录为基本目录,除非你制定它.

webpack-dev-server --content-base build/

  

上述命令是在命令行中执行的,它将build目录作为根目录.有一点需要注意的是:webpack-dev-server生成的包并没有放在你的真实目录中,而是放在了内存中.

我们在基本目录下新建一个index.html文件,然后在浏览器中输入http://localhost:8080访问.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="assets/bundle.js"></script>
</body>
</html>

  

webpack-dev-server启动proxy代理

代理配置

webpack-dev-server使用http-proxy-middleware去把请求代理到一个外部的服务器,配置的样例如下:

//配置服务器
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
contentBase: "./app",
port: 8090,
proxy: {
"/api": {
target: 'http://localhost:8888',
pathRewrite: {'^/api' : ''},
changeOrigin: true
}
}, },

  

这种代理在很多情况下是很重要的,比如你可以把一些静态文件通过本地的服务器加载,而一些API请求全部通过一个远程的服务器来完成。还有一个情景就是在两个独立的服务器之间进行请求分割,如一个服务器负责授权而另外一个服务应用本身。

pathRewrite: 对于代理的请求可以通过提供一个函数来重写,这个函数可以查看或者改变http请求。下面的例子就会重写HTTP请求,其主要作用就是移除URL前面的/api部分。

绕开代理

通过一个函数的返回值可以视情况的绕开一个代理。这个函数可以查看http请求和响应以及一些代理的选项。它必须返回要么是false要么是一个URL的path,这个path将会用于处理请求而不是使用原来代理的方式完成。下面的例子的配置将会忽略来自于浏览器的HTTP请求,他和historyApiFallback配置类似。浏览器请求可以像往常一样接收到HTML文件,但是API请求将会被代理到另外的服务器:

proxy: {
'/some/path': {
target: 'https://other-server.example.com',
secure: false,
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
}

 

代理本地虚拟主机

http-proxy-middleware会预解析本地hostname成为localhost,你可以使用下面的配置来修改这种默认行为:

var server = new webpackDevServer(compiler, {
quiet: false,
stats: { colors: true },
proxy: {
"/api": {
"target": {
"host": "action-js.dev",
"protocol": 'http:',
"port": 80
},
ignorePath: true,
changeOrigin: true,
secure: false
}
}
});
server.listen(8080);

  

贴入我自己项目的webpack.config.js配置:

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //抽取CSS文件插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin'); //自动打开浏览器插件
var ROOT_PATH = path.resolve(__dirname);
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var APP_PATH = path.resolve(ROOT_PATH, 'app'); module.exports = {
//配置服务器
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
contentBase: "./app",
port: 8090,
proxy: {
"/api": {
target: 'http://localhost:8888',
pathRewrite: {'^/api' : ''},
changeOrigin: true
}
}, }, //配置入口, 支持多入口
entry: {
page: ROOT_PATH + '/app/src/router/router.jsx',
vendors: ['react', 'react-dom', 'react-router', 'mobx'] //第三方库和框架
}, output: {
// path: "dist",
publicPath: 'dist',
filename: 'js/bundle.js'
}, module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })//此处不用loader,改为use
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('css-loader!less-loader')
},
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192&name=img/[name].[ext]'
},
{
test: /\.(woff|woff2|eot|ttf|svg)(\?.*$|$)/,
loader: 'url-loader'
}
]
}, resolve: {
extensions: [' ', '.js', '.jsx']
}, plugins: [
new webpack.optimize.CommonsChunkPlugin({ 'name': 'vendors', 'filename': 'js/vendors.js' }),
new ExtractTextPlugin("css/bundle.css"),
// 如需jquery请解锁
// new webpack.ProvidePlugin({ $: "jquery" }),
new webpack.HotModuleReplacementPlugin(),
new OpenBrowserPlugin({ url: 'http://localhost:8090/gallery' })
]
}

  

总结: 如有疑问请参考官方文档 https://doc.webpack-china.org/concepts/

使用webpack-dev-server设置反向代理解决前端跨域问题的更多相关文章

  1. 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题

    一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...

  2. nginx反向代理-解决前端跨域问题

    1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...

  3. 利用nginx做反向代理解决前端跨域问题

    最近朋友再群里提了一个问题,他们公司给他提供了一个获取数据的接口,在浏览器访问这个接口能获取到json数据,但是放在项目里使用ajax就产生了跨域问题,一般这个需要提供接口的后台方面需要做跨域处理,但 ...

  4. 使用nginx反向代理解决前端跨域问题

    1. 首先去Nginx官网下载一个最新版本的Nginx,下载地址:http://nginx.org/en/download.html.我这里下载的版本是:nginx/Windows-1.12.0.下载 ...

  5. Nginx反向代理解决iframe跨域问题

    前言 这几天有个需求:做个表单页面,要求后台人员能自定义发布表单,用户来填写表单.我一想,这不麦克表单有现成的吗,拿来就用!发布表单后,可以选择使用iframe方式嵌入网站,一切顺利. 当时的网站是h ...

  6. nginx 配置反向代理解决请求跨域问题

    server { listen ; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; roo ...

  7. 用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面

    用nginx的反向代理机制解决前端跨域问题在nginx上部署web静态页面 1.什么是跨域以及产生原因 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,或是a页面为ip地 ...

  8. 简单配置nginx反向代理,实现跨域请求

    简单配置nginx去做反向代理,实现跨域请求 简单介绍nginx的nginx.conf最核心的配置,去做反向代理,实现跨域请求. 更多详细配置,参考nginx官方文档 先介绍几个nginx命令 打开n ...

  9. 完美解决前端跨域之 easyXDM 的使用和解析

    前端跨域问题在大型网站中是比较常见的问题.本文详细介绍了利用 easyXDM 解决前端跨域的原理细节和使用细节,具体使用时可以在文中代码实例的基础上扩展完成. 0.背景 因个别网络运营商存在 HTTP ...

随机推荐

  1. 用UIWebView加载本地图片和gif图

    加载gif图: NSData *gif = [NSData dataWithContentsOfFile: [[NSBundle mainBundle] pathForResource:@" ...

  2. [翻译] Tensorflow模型的保存与恢复

    翻译自:http://cv-tricks.com/tensorflow-tutorial/save-restore-tensorflow-models-quick-complete-tutorial/ ...

  3. 定义一个方法get_page(url),url参数是需要获取网页内容的网址,返回网页的内容。提示(可以了解python的urllib模块)

    定义一个方法get_page(url),url参数是需要获取网页内容的网址,返回网页的内容.提示(可以了解python的urllib模块) import urllib.request def get_ ...

  4. C# QQ邮箱授权码发送邮件

    using System.Net;using System.Web.Mail; public class SendMail { /// <summary> /// 发送Email /// ...

  5. Python更新pip出现错误解决方法

    Python更新pip出现错误解决方法 更新pip python -m pip install --upgrade pip 查看时报错 解决方法 在命令栏(即win+r)输入:easy_install ...

  6. CentOS6.9安装

    我安装在VM的虚拟机中.具体安装方式网上很多,由于本机只能安装32位的linux系统,所以悬在了Centsos6.9版本.点此下载. 其中有一种是叫做LIVEDVD的版本,这种的值虚拟机中配置后,打开 ...

  7. 参考用bat文件

    @echo off rem *************** start of 'main' set DEBUG= " (set TRACE=echo) else (set TRACE=rem ...

  8. 使用Nwjs开发桌面应用体验

    之前一直用.net开发桌面应用,最近由于公司需要转为nodejs,但也是一直用nodejs开发后台应用,网站,接口等.近期,需要开发一个客户端,想着既然nodejs号称全栈,就试一下开发桌面应用到底行 ...

  9. [SDOI 2008]沙拉公主的困惑

    Description 大富翁国因为通货膨胀,以及假钞泛滥,政府决定推出一项新的政策:现有钞票编号范围为1到N的阶乘,但是,政府只发行编号与M!互质的钞票.房地产第一大户沙拉公主决定预测一下大富翁国现 ...

  10. [SDOI 2009]Elaxia的路线

    Description 最近,Elaxia和w**的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两个人在一起的时间.Elaxia和w**每天都要奔波于宿舍和实验室之间, ...