webpack4基本使用(四)-跨域-环境变量

16 wepack跨域问题

1. 通过前端代理实现跨域
2. 如果前端只是模拟数据时，我们可以使用devServer 自带的express模块

devServer:{
        //3. 有服务端 不用代理来处理， 能不能再服务器中启动webpack 端口 服务端口
        
        //2 我们前端只想单纯模拟数据 app = express()
        before(app) {
            app.get("/user", (req,res) => {
                res.json({name:"fsdf--before"})
            })
        },
        //1
        proxy: {//代理 把前端请求 代理到 服务器上地址
            "/api": {
                target: "http://localhost:3000",
                pathRewrite: {
                    "/api":""
                }
            }
        }
    }

3. 如果服务端是node自己写的可以在服务端启动webpack 保证没有跨域问题

let express = require("express");//自带
let app = express();
let webpack = require("webpack");//自带

//3. 服务端自己写的话 可以启动webpack
//中间件
let middle = require("webpack-dev-middleware");
let config = require("./webpack.config")

let compiler = webpack(config);//加载配置


app.use(middle(compiler));


app.get("/user", (req,res) => {
    res.json({name:"fsdf"})
})

app.listen(3000,() => {
    console.log("服务器开启2")
});

17 webpack的 resolve选项（对引入的第三方包 配置，起别名，查找文件顺序，查找扩展名的属性）

 resolve: {//解析第三方模块 引入的是js
         modules: [path.resolve("node_modules")],//第三方包自动在这个目录下查找
         extensions: [".js",".css",".json"],//扩展名，比如引入 "./stye"  先查找js css json 顺序 
         mainFields: ["style", "main"],//查找时的顺序 先查找style  再查找 main
         alias: {//给目录起别名
            // bootstrap: "bootstrap/dist/css/bootstrap.css"//1.
         }

    },

18 定义环境变量

1. 通过webpack内置插件可以定义变量（不推荐的）

  plugins: [
        new webpack.DefinePlugin({
            DEV: " 'development' ",   // 会把 dev 变量 定义到 webpack中
            DEV2: JSON.stringify('production'),
            FLAG: "ture"
        }),
    
    ],
    //普通js模块
    let url = "";
if(DEV == "development") {
    url = "http://localhost:3000"
}else {
    url="http://www.xxxx.com"
}

console.log(url,"-------------------");

2. 一般我们喜欢通过 webpack.dev.js和webpack.prod.js 文件来控制不同环境下的配置， 需要 按照 webpack-merge 包

//webpack.base.js 通用的配置
//webpack.dev.js  开发环境配置
let {smart } = require("webpack-merge");
let base = require("./webpack.base.js");
module.exports = smart(base,{
    model: "development",
    // 开发环境配置
})
//webpack.prod.js 生产环境配置
let {smart } = require("webpack-merge");
let base = require("./webpack.base.js");
module.exports = smart(base,{
    model: "production"
    // 生产环境配置
})