webpack-watch与devSever-CORS

1.什么是watch?

webpack 可以监听打包文件变化，当它们修改后会重新编译打包
那么如何监听打包文件变化呢? 使用 watch

2.watch相关配置watchOptions

poll: 1000 // 每隔多少时间检查一次变动
aggregateTimeout: // 防抖, 和函数防抖一样, 改变过程中不重新打包, 只有改变完成指定时间后才打包
ignored: 排除一些巨大的文件夹, 不需要监控的文件夹, 例如 node_modules

//webpack.config.js

module.exports = {
//启用 Watch 模式。这意味着在初始构建之后，webpack 将继续监听任何已解析文件的更改。
	watch:true,
	watchOptions:{
		poll:1000,
		aggregateTimeout:300,
		ignored: /node_modules/
}

3.在开启watch之后，webstorm就出现问题了

每次一刷新，就404 NOT FOUND

4.dev-sever

4.1什么是webpack-dev-server?
webpack-dev-server和watch一样可以监听文件变化
webpack-dev-server可以将我们打包好的程序运行在一个服务器环境下
webpack-dev-server可以解决企业开发中"开发阶段"的跨域问题 配置proxy

4.2webpack-dev-server使用
4.2.1安装webpack-dev-server
https://www.npmjs.com/package/webpack-dev-server
npm install webpack-dev-server --save-dev
4.2.2配置webpack-dev-server
devServer: {
contentBase: “./bundle”,
open: true,
port: 9090
}
在package.json的scripts中添加语句
“start”: “npx webpack-dev-server --config webpack.config.js”

4.3利用devServer配置解决开发阶段的跨域问题（proxy）

//利用node的http模块创建一个服务器
const http = require("http");

http.createServer(function (req, res) {
    if(req.url.startsWith("/user") && req.method.toLowerCase() === "get"){
        res.writeHead(200, {
            "Content-Type": "text/plain; charset=utf-8"
        });
        res.end("andy666");
    }else if(req.url.startsWith("/login") && req.method.toLowerCase() === "get"){
        res.writeHead(200, {
            "Content-Type": "text/plain; charset=utf-8"
        });
        res.end("老李666");
    }
}).listen(3000);

前端请求的代码：

import $ from 'jquery'

/*
跨域判断：协议、域名、端口号，只要不是完全相同，就算跨域
当前发送请求的地址：http://127.0.0.1:9090/user
服务端的地址：http://127.0.0.1:3000/user
端口号不同，跨域了
 */
$.get('/user',function (res) {
    console.log(res);
});


$.get('/login',function (res) {
    console.log(res);
});

例如：
当前发送请求的地址：http://127.0.0.1:9090/user
服务端的地址：http://127.0.0.1:3000/user

想要解决开发阶段的跨域问题，可做如下配置

//webpack.config.js

module.exports = {
devServer: {
        port:9090,
        //解决开发阶段的跨域问题
        proxy:{
            /*
                以下配置的含义：
                    当我们在程序中发送请求到/user的时候，devServer就会自动将我们请求的地址替换为
                    http://127.0.0.1:3000/user
             */
            "/user":{
                target:'http://127.0.0.1:3000',
                changeOrigin: true,   //域名跨域
                secure: false,        //https跨域
            },
            "/login":{
                target:'http://127.0.0.1:3000',
                changeOrigin: true,   //域名跨域
                secure: false,        //https跨域
            }
        }
       
        /*
        注意点：devServer只能解决开发阶段的跨域问题，并不能解决项目上线之后的跨域问题
                原因很简单，因为项目上线后是将打包好的文件上传到服务器，而打包好的文件中并没有devServer
                项目上线之后解决跨域问题还是要依赖服务端或者其他方式
         */
    },
}

现在只有两个接口，就要写两次，如果接口多的话，那就把人累死了，所以必须配置达到多个匹配

proxy:[{
            context:['/user','/login'],
            target:'http://127.0.0.1:3000',
            changeOrigin:true,//域名跨域
            secure:false,//https跨域
        }]

此时服务器端的接口做了如下修改:"/api/user"和"/api/login"

const http = require("http");

http.createServer(function (req, res) {
    if(req.url.startsWith("/api/user") && req.method.toLowerCase() === "get"){
        res.writeHead(200, {
            "Content-Type": "text/plain; charset=utf-8"
        });
        res.end("andy666");
    }else if(req.url.startsWith("/api/login") && req.method.toLowerCase() === "get"){
        res.writeHead(200, {
            "Content-Type": "text/plain; charset=utf-8"
        });
        res.end("老李666");
    }
}).listen(3000);

那么可以增加一个属性

proxy:[{
            context:['/user','/login'],
            target:'http://127.0.0.1:3000',
            changeOrigin:true,//域名跨域
            secure:false,//https跨域
            pathRewrite: {"" : "/api"}//路径重写，将路径中的api替换为空
        }]

注意点：devServer只能解决开发阶段的跨域问题，并不能解决项目上线之后的跨域问题，原因很简单，因为项目上线后是将打包好的文件上传到服务器，而打包好的文件中并没有devServer，项目上线之后解决跨域问题还是要依赖服务端或者其他方式

注意点

使用dev-server打包后不会产生bundle目录！！！！！