webpack自带的跨域代理配置

Posted 2021-01-11 haines

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

解决：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
			}
		}
	}
};