webpack4.0 前后端跨域处理的3中方法

1和2直接在webpack.config.js下的devServer下配置处理

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let cleanWebpackPlugin = require('clean-webpack-plugin');
let copyWebpackPlugin = require('copy-webpack-plugin');
let webpack = require('webpack')
//1) cleanWebpackPlugin  (清除文件插件)
//2) copyWebpackPlugin (复制文件插件)
//3) bannerPlugin  内置的webpack上带的(版权声明插件)
module.exports = {
    //多入口
    mode: "production",
    entry: {
        index: './src/index.js',
    },
    output: {
        //[name] home,other对应要打包的js名
        filename: "[name].js",
        path: path.resolve(__dirname, 'dist'),
    },
    //devtool: 'source-map',//源码映射,可以帮助我们调试源代码 会单独生成一个sourcemap文件 出错了会标识当前报错的列和行
    // devtool: 'eval-source-map',//报错会显示行和列但是不会生成map文件
    // devtool: 'cheap-module-source-map', //不会产生列 但是是一个单独的映射文件,产生后你可以保留起来用于调试
    //devtool: 'cheap-module-eval-source-map',//不会生成文件 集成在打包后的文件中 ,会有行的报错,不会有列的报错
    devServer: {
        port: "8080",
        progress: true,//如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。
        contentBase: path.join(__dirname, "dist"),//此处最好是绝对路径
        // 1 有服务端 不用代理来处理 能不能在服务端口中启动webpack 端口用服务端端口

        //2前端单纯用来模拟数据
        // before(app) {
        //     app.get('/user', (req, res) => {
        //         res.json({name: '我是谁2'})
        //     })
        // }
        // proxy: {//3重写的方式(已知接口的情况下) 把请求代理到express服务器上
        //     '/api': {
        //         target: 'http://localhost:3000',
        //         pathRewrite: {
        //             '/api': ''
        //         }//配置了一个代理
        //     }
        // }
    },
    // watch: true,
    // watchOptions: {//监控的选项
    //     poll: 1000,//每秒问我1000次
    //     aggregateTimeout: 500,//防抖 我一直输入代码
    //     ignored: /node_modules/,//不需要进行监控哪个文件
    // },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }

                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
            chunks: ['index']
        }),
        new cleanWebpackPlugin('./dist'),
        new copyWebpackPlugin([
            {from: './doc', to: './'}
        ]),
        new webpack.BannerPlugin("版权归我所有")
    ]
}

方法3在服务器中引用webpack.config.js配置文件解决跨域问题,有服务端,不用用代理来处理,在服务端口启动webpack,端口用服务端端口

let express = require('express');
let webpack = require('webpack');//服务器跨域解决方案webpack
let app = express();

//中间件
let middle = require('webpack-dev-middleware');//yarn add webpack-dev-middleware -D
let config = require('./webpack.config');//引用webpack.config.js配置文件
let compiler = webpack(config);//固定写法
app.use(middle(compiler));//中间件调用固定写法

app.get('/user', (req, res) => {
    res.json({name: '我是谁'})
})
app.listen(3000);