webpack跨域問題
webpack自己帶了express框架
1、配置代理proxy
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 以前的用法
// let CleanWebpackPlugin = require('clean-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack');
module.exports = {
// 多入口
mode: 'development',
entry: {
home: './src/index.js',
},
// devServer: {
// publicPath: '',
// proxy: {
// '/api/**': 'http://localhost:3000', // 配置了一個代理
// secure: false
// },
// },
devServer: {
proxy: {
// 凡是以/api開頭的請求,都轉化請求路徑
'/api': {
target: 'http://localhost:4000',
pathRewrite: {'/api':''},
changeOrigin: true,
secure: false
}
}
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
devtool: 'cheap-module-eval-source-map',
output: {
// 這裏的 name代表 home, other
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
filename: "index.html",
chunks: [
"home",
],
}),
]
};
2、使用before
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 以前的用法
// let CleanWebpackPlugin = require('clean-webpack-plugin');
let CopyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack');
module.exports = {
// 多入口
mode: 'development',
entry: {
home: './src/index.js',
},
devServer: {
before(app){
app.get('/user', (req, res) => {
res.json({name: 'zhangfeng'});
});
},
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
devtool: 'cheap-module-eval-source-map',
output: {
// 這裏的 name代表 home, other
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin({
template: "./index.html",
filename: "index.html",
chunks: [
"home",
],
}),
]
};
3、通過在服務端進行啓動webpack 端口就用服務器端口
express使用webpack-dev-middleware中間件
let express = require('express');
let app = express();
let webpack = require('webpack');
// 中間件
let middle = require('webpack-dev-middleware');
let config = require('./webpack.config');
let compiler = webpack(config);
app.use(middle(compiler));
console.log(1111111111111);
app.get('/user', (req, res) => {
res.json({name: 'zhangfeng'});
});
app.get("*", function(request, response) {
response.json({name: 'hahahahha'});
});
app.listen(4000);