前端实战环境问题三记

零. 前言

本人前端白痴，因现在做的电商项目需要，跟了一个前端课程。
不出所料，搭建环境时就出了许多问题，因为没有前端基础解决问题时很无力。
遂选取了三条困扰我比较久的问题做一下记录，用于整理自己解决问题的思路罢了。

---

一. WebPack 代码分离

本条记录，webpack 做重复代码的提取分离时，新旧版本和默认配置的坑点。

1.1 老版本

因为课程使用 webpack 1.x 版本的原因，使用的代码为
webpack.config.js:

var webpack = require('webpack');
module.exports = {
...
	plugins: [
		new webpack.optimize.CommonsChunkPlugin({
			name: 'commons',
			filename: 'js/base.js'
		})
	],
...
}

而使用此代码在新版本 (4.x) 会出现以下的问题
Error: webpack.optimize.CommonsChunkPlugin
has been removed, please use config.optimization.splitChunks instead.

1.2 新版本

查看报错信息，找到官方文档，根据 demo 将代码修改成：
webpack.config.js:

module.exports = {
...
	plugins: [],
	splitChunks: {
		cacheGroups: {
			commons: {
				name: "commons",
				chunks: "initial",
				minChunks: 2
			}
		}
	}，
...
}

1.3 踩坑点

根据新版本的方法，其实问题也就解决了，但是我的 demo 怎么也没成功分离出重复代码，也没有任何报错，实在是折磨死人了。
后来反反复复搜索其他人的解决方案，终于发现一个问题。在官方文档中，有写到参数的默认配置，
其中 minSize: 30000，设置了默认分离的阈值为 30kib，若重复代码小于 30kib 则不会触发分离机制。这！谁！想！得！到。。。
于是自行配置 minSize 为适合的值（如下面例子中的 30），问题解决：

webpack.config.js:

module.exports = {
...
	plugins: [],
	splitChunks: {
		cacheGroups: {
			commons: {
				name: "commons",
				chunks: "initial",
				minChunks: 2,
				minSize: 30
			}
		}
	}，
...
}

---

二. Fiddler 无法捕获到 localhost

本条记录，Fidder 在拦截并修改请求时，遇到的问题。

2.1 需求介绍

在项目中需要跨域访问某网站接口，出于开发前期考虑，决定将跨域请求修改为本地请求，再由拦截工具对请求进行转发，实现跨域操作。
因为课程使用 MacOS 的 Charles，可以捕获到 localhost 的活动并进行处理，而 Windows 下的 Fiddler 无法捕获 127.0.0.1 与 localhost，故出现问题。

2.2 排错过程

一开始以为是自己配置出错了，遂尝试拦截 bing.com 到 baidu.com，生效。

于是开始发现访问 localhost 时左侧的 Stream 没有捕获到，猜测不会捕获 localhost，搜索了一下果不其然。

找解决方法，了解到 Fiddler 会配置地址 ipv4.fiddler 到 localhost，且可被抓取到（该域名仅在 Fiddler 启动时生效）。
所以将 AutoResponder 规则中的 localhost 项改为 ipv4.fiddler，且调试过程中使用 ipv4.fiddler 代替 localhost 进行访问即可。

---

三. Nginx 转发后 sessionId 不一致

3.1 需求介绍

因本地调试需要，在本地安装并配置 nginx，用于模拟 ftp、静态资源、后端接口、前端门户等在线服务器。
其实一开始直接拷贝课程配置文件没有任何问题，后来工程重建后自行修改了配置，导致出现问题。
该电商系统有登录功能，登录成功后将信息保存到 session 中方便状态校验，但最近发现登录成功后校验始终无法通过。

3.2 排错过程

首先考虑代码层面，代码通过 git 回滚到上一可用版本，问题依旧。将代码部署到云服务器测试，问题消失。排除代码问题可能。
接着怀疑 Fiddler 做跨域拦截时，误操作了某个配置导致 session 不被转发 / 丢弃。抛弃 Fiddler 使用 postman 直接发请求，问题依旧。排除 Fiddler 问题可能。
然后想起自己开的 clash 代理，也许是它把我的网络请求进行了处理导致 session 有问题，对软件的各种模式和开关进行修改，问题均没有解决。此条存疑，无法排除，考虑重装系统。
正打算重装系统时，忽然想到 Tomcat 作为服务器容器，也许是它的原因，简单粗暴重装 tomcat，仍有问题。然后新建一个简单的 session 打印项目，发现 sessionId 一致无误。排除 Tomcat 问题可能。
万念俱灰，退出各种工具准备重装系统时，nginx stop 引起我的注意，好像每个请求都经过了它，我怎么没想到。中止 nginx 后使用 localhost 域名进行测试，问题解决。问题目标锁定为 nginx。

3.3 问题解决

比对本地和云端服务器的 nginx 域名配置文件，发现本地 nginx 未对请求的 cookie 进行转发，导致 tomcat 认为是新连接，新建了 session（于是体现为 id 不一致，且）丢失登录校验信息。
添加 cookie 配置语句问题解决。

proxy_cookie_path /EMM_Mall_Backend_war_exploded /;
proxy_set_header Cookie $http_cookie;

---

四. 后记

其实上述三个问题都挺简单的，解决之前觉得自己遇到了不可思议的力量在阻止我学习编程 0_0，解决后觉得自己跟个 sb 一样，这么简单的问题浪费了这么多时间，害。