今日总结
上午，吴华真老师给我们前端组测试了一下npm和gulp相关知识，
要求如下：
1.克隆工程https://rdc.hand-china.com/gitlab/train-front-end/npm-test.git并切换分支，分支名为工号
2.初始化npm，命名test-工号
3.安装gulp为开发依赖
4.创建目录src，在目录下创建index.js和math.js
5.在math.js中暴露函数max，功能为传入三个数字，输出最大值
6.在index.js中引入math，调用并打印函数返回值，函数入参自拟
7.用gulp建立任务，任务名为build，功能为复制src下的所有文件到lib目录，目录与src同级
8.建立npm脚本，命名为pub，能够执行gulp任务然后发布npm库，库名为test-工号，库的地址https://nexus.choerodon.com.cn/repository/train-npm/
9.提交代码到gitlab
要求，npm库中只包含lib目录，gitlab提交的代码忽略lib目录
附加题1:复制文件的时候能够重命名文件，命名规则是文件名后面加.min
附加题2:复制文件的时候能够进行压缩，压缩工具库自行查找
由于都是昨天差不多讲过的，加上自己昨天学习了相关知识，所以做起来还是轻车熟路的。大概花了20分钟做完吧（其实后来才发现看漏了附加题2），到了提交gitlab的时候出了大问题。
git push的时候，第一次输入账户名密码之后，显示
remote: HTTP Basic: Access denied
好的，我立马意识到是账户名密码不对，这时候老师也说了，这个账户和之前用的不一样，需要重新设置。于是我百度了重置凭证的命令，如下：
git config --system --unset credential.helper
正常情况下，输入这个命令就会重置凭证管理器，也就是可以重新输入用户名密码进行HTTPs连接。然而我输入了这个之后，报错：
error: could not lock config file C:/Program Files/Git/mingw64/etc/gitconfig
大意就是，找不到git的配置文件，所以无法重置。我的天，我真是多灾多难，我继续百度了半天，基本没人遇到过这个问题。我怀疑是自己关联的时候出错了，所以重新建了N个文件夹重新remote，结果还是在同样的地方报错。
那一天，我重新想起了最近一直被git折磨的恐惧，上次的周末博客至今还是因为公司网络的原因Push不上去。git还真是老跟我过不去啊，这次又要查多久呢。
还好，我及时想起来了，翻墙用google能解决很多百度没有的问题，于是google搜索了我的报错信息，查了半天，居然有人遇到一样的问题，底下推荐答案是卸载git的凭证管理器，也就是说以后每次HTTPS上传都需要输入用户名和密码。查了几个小时的我死马当作活马医，输入了以下指令：
git credential-manager uninstall
奇迹发生了！bash提示我卸载了，我再进行push的时候，输入了用户名密码，就成功了。然而这已经是下午2点了，距离交卷时间过去很久了。真是，20分钟写完，提交了3个小时。
git毕竟是一个伟大的工具，未来肯定还有数不尽的坑等着我去跳，放平心态，慢慢来，多google，总会解决的。可惜的是，我漏看了附加题2。
下午学习webpack相关知识
WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，
Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
之前我看过的教程有个形象的比喻，如果说做项目是盖房子的话，gulp/grunt就是从0开始一步步盖，而webpack则是直接给你个房子的雏形，然后你自己改造。
正式使用Webpack
webpack可以在终端中使用，在基本的使用方法如下：
# {extry file}出填写入口文件的路径，本文中就是上述main.js的路径，
# {destination for bundled file}处填写打包文件的存放路径
# 填写路径的时候不用添加{}
webpack {entry file} {destination for bundled file}
指定入口文件后，webpack将自动识别项目所依赖的其它文件，不过需要注意的是如果你的webpack不是全局安装的，那么当你在终端中使用此命令时，需要额外指定其在node_modules中的地址，继续上面的例子，在终端中输入如下命令
webpack非全局安装的情况
node_modules/.bin/webpack app/main.js public/bundle.js
前方有坑警告
webpack由于现在都是4.x版本了，所以需要集成一个webpack-cli，记得必须安装同一环境下，比如全局或者文件依赖。
另外，如果按照这个教程敲代码，会报错：
PS D:\webpacktrainning> webpack app/main.js public/bundle.js
ERROR in multi ./app/main.js public/bundle.js
Module not found: Error: Can't resolve 'public/bundle.js' in 'D:\webpacktrainning'
后来经过google，发现命令中需要加-o。可能是教程版本比较老的原因，下面这个指令是对的：
webpack app/main.js -o public/bundle.js
举一反三
结合昨天学的node知识，我来改写一下main.js和Greeter.js的内容，
Greeter.js:
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
document.querySelector("#root").appendChild(greet);
};
main.js
const greeter = require('./Greeter.js');
greeter();
这样的话，直接在greeter()中完成所有操作，main引用即可。
研究webpack的配置文件
webpack.config.js:
devtool:'eval-source-map',//使用该方式生成source-map
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
使用webpack构建本地服务器
其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖
npm install --save-dev webpack-dev-server
webpack.config.js加入以下几行
devServer: {
contentBase: "./public", //本地服务器所加载的页面所在的目录
historyApiFallback: true, //不跳转
inline: true //实时刷新
}
package.json里脚本加入server脚本：
"server": "webpack-dev-server --open"
npm run 脚本名（server）即可观看结果。
Loaders
Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。
babel
Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：
让你能使用最新的JavaScript代码（ES6，ES7...），而不用管新标准是否被当前使用的浏览器完全支持；
让你能使用基于JavaScript进行了拓展的语言，比如React的JSX；
CSS
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同
css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,
style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
Plugins
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。