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. python入门(7)Python程序的风格

    python入门(7)Python程序的风格 Python采用缩进方式,写出来的代码就像下面的样子: # print absolute value of an integer: a = 100 if ...

  2. Spring Security入门(2-3)Spring Security 的运行原理 3

    关键组件关系 FilterSecurityInterceptor--- authenticationManager --- UserDetailService--- accessDecisionMan ...

  3. React中路由传参及接收参数的方式

    注意:  路由表改变后要重启服务      方式 一:          通过params         1.路由表中                     <Route path=' /s ...

  4. ORACLE数据库编程

    第一章 Oracle数据库基本概念 一.介绍 Oracle数据库系统是美国Oracle(甲骨文)公司提供的以分布式数据库为 核心的一组软件产品,是目前最流行的客户/服务器(Client/Server, ...

  5. CSS基础:内联元素

    简介 内联元素由于涉及到文本字体,读写方向,汉字和字母差异等诸多方面的影响,因此其盒模型比块级元素更加复杂,对于内联非替换元素,比如一行文本,主要由以下几种框构成: "em 框", ...

  6. Java高级篇(三)——JDBC数据库编程

    JDBC是连接数据库和Java程序的桥梁,通过JDBC API可以方便地实现对各种主流数据库的操作.本篇将介绍一下如何使用JDBC操作数据库(以MySQL为例). 一.JDBC JDBC制定了统一访问 ...

  7. 列表(list)之三 -如何较为均匀的将任意字符串按指定组数分组,方差最少

    当字符串的长度不是份数的整数倍时如何均匀地分割,例如:长度为11的字符串要分割成4份,有很多种分法,比如3, 3, 3, 2(前3个字符一份,中间3个一份,再中间3个一份,最后2个一份)这种是比较均匀 ...

  8. Python 学习开篇

    前言 最近看到一张图,有点意思: 蓝色是(成长+付出),红色是回报.有多久可以达到这个红心,要看我们自已的努力,付出了多少专注与汗水.我想说的是,水平轴并不是时间,如果不能坚持努力,可能永远都到不了那 ...

  9. mvc4.0 @Styles.Render(转)

    1.@Styles.Render 在页面上可以用@Styles.Render("~/Content/css") 来加载css 首先要在App_Start 里面BundleConfi ...

  10. Java 枚举类型简介

    目录 Java 枚举示例 Java 枚举构造函数 枚举类型是用于定义常量集合的特殊类型,更确切的说,JAVA枚举类型是一种特殊的 java 类.枚举类型可以包含常量.方法等.在 java5 中添加了 ...