webpack自带的跨域代理配置

问题:开发过程中难免有跨域的问题。

解决:webpack代理的配置

const path                                                       = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
module.exports = {
        entry: './src/app.jsx',
        output: {
                path: path.resolve(__dirname, 'dist'),
                filename: 'js/app.js',
                publicPath: "/dist/"
        },
        resolve: {
                alias : {
                        page : path.resolve(__dirname, 'src/page'),
                        component : path.resolve(__dirname, 'src/component'),
                        util : path.resolve(__dirname, 'src/util'),
                        service : path.resolve(__dirname, 'src/service'),
                }
        },
        module: {
                rules: [
                        //jsx
                        {
                                test: /\.jsx$/,
                                exclude: /(node_modules)/,
                                use: {
                                        loader: 'babel-loader',
                                        options: {
                                                presets: ['env','react']//根据环境打包(浏览器,node)
                                        }
                                }
                        },
                        //css
                        {
                                test: /\.css$/,
                                use: ExtractTextPlugin.extract({
                                        fallback: "style-loader",
                                        use: "css-loader"
                                })
       },
                        //sass
                        {
                                test: /\.scss$/,
                                use: ExtractTextPlugin.extract({
                                        fallback: 'style-loader',
                                        use: ['css-loader', 'sass-loader']
                                })
                        },
                        //图片的配置
                        {
                                test: /\.(png|jpg|gif)$/i,
                                use: [
                                        {
                                                loader: 'url-loader',
                                                options: {
                                                        limit: 8192,
                                                        name:'resource/[name].[ext]'
                                                }
                                        }
                                ]
                        },
                        //字体的配置
                        {
                                test: /\.(otf|eot|svg|ttf|woff|woff2)$/i,
                                use: [
                                        {
                                                loader: 'url-loader',
                                                options: {
                                                        limit: 8192,
                                                        name:'resource/[name].[ext]'
                                                }
                                        }
                                ]
                        }
                ]
        },
        plugins: [
                //处理css文件
                new HtmlWebpackPlugin({
                        template:'./src/index.html',
                        favicon:'./favicon.ico'
                }),
                //独立css
                new ExtractTextPlugin("css/[name].css"),//参数为生成css的位置
                //提取公共模块
                new webpack.optimize.CommonsChunkPlugin({//webpack自带插件,不用安装
                        name:'common',
                        filename:'js/base.js'
                })
        ],
        devServer: {
                // contentBase: path.join(__dirname, 'dist'),
                port: 9999,
                historyApiFallback:{
                        index : '/dist/index.html'//404
                },
                proxy : {
                        '/manage' : {
                                target : 'http://admintest.happymmall.com',
                                changeOrigin : true
                        }
                }
        }
};