今日总结
上午吴老师组织进行了webpack相关的测试，考题相关内容如下：
1.克隆工程https://rdc.hand-china.com/gitlab/train-front-end/webpack-test.git并切换分支，分支名为工号
2.初始化npm，命名webpack-工号
安装webpack、webpack-dev-server为开发依赖
3.创建目录src，在目录下创建index.js、index.css、index.tplt.html
4.建立名为start的npm脚本，能够使用webpack-dev-server打包并启动服务，服务端口号9090
5.发布到npm库，地址https://nexus.choerodon.com.cn/repository/train-npm/
提交代码到gitlab
要求
1.打包的目录名为dist， 与src目录同级
2.js和css要分离打包，文件命名规则index.[hash:8].js和 index.[hash:8].css
3.启动服务后，页面中图片水平垂直居中，图片使用assents/c7n.jpg，图片路径不能为base64码。
4.页面标签要有favicon.ico图标，页面标题为test-工号，图标和标题不能直接修改index.tplt.html来实现。
5.npm库中只包含dist目录，gitlab提交的代码忽略dist、node_modules目录
实现过程中遇到的坑记录
1.最蠢的坑，由于项目是clone下来的。根目录并不在我npm init的根目录下，所以每次运行npm run命令时，总是报错，找不到入口文件，也就是’./src/index.js’.我一开始以为是webpack.config.js的entry选项的路径错误，于是我相对路径试了，绝对路径也试了，都不对。顺便写一下相对路径和绝对路径的相关知识。
"." 代表当前所在目录，相对路径。如:<a href="./abc">文本</a>或<img src="./abc" />；
".." 代表上一层目录，相对路径。如:<a href="../abc">文本</a>或<img src="../abc"/>；
"../../" 代表的是上一层目录的上一层目录，相对路径。 如:<img src="../../abc" />；
"/" 代表根目录,绝对路径。 如：<a href="/abc">文本</a>或<img src="/abc"/>；
"D:/abc/" 代表根目录,绝对路径。
后来啊，我才发现自己的根本就没有把src设置在根目录下，能跑的起来才出鬼了。但是这至少浪费了我半个多小时，挺蠢的，说到底还是很生疏。
2.入口和模板文件的设置问题，index.js里要import所用到css文件,这样才可以被webpack打包并引用到打包后生成的html里。
值得注意的是template.html里如果引进的img,是不会进行打包的生成到指定目录下，需要css里进行引用才行。单独引进的话，很可能路径不对，导致生成之后的html引用无效。
由于 webpack 对 html 的处理不太好，打包 HTML 文件中的图片资源是相对来说最麻烦的。这里需要引用一个插件—— html-withimg-loder
$ npm install html-withimg-loader --save-dev
webpack.config.js 添加配置
module: {
loaders: [
{
test: /\.html$/,
loader: 'html-withimg-loader'
}
]
}
在 bundle.js 中引用 html 文件
import '../index.html';
这样 html 文件中的图片就可以被打包进 bundle 文件夹里了。
3.图片路径问题。由于要求里规定了不能用base64码，所以我们要在url-loader中进行设置如下：
{
test:/.*\.jpg/,
use:'url-loader?limit=1024&name=[name].[ext]',
}
limit属性表示，小于1024的图片文件将会被转码。name属性则是设置了jpg输出文件的Name。
4.css样式问题。水平居中不难，但是我要在css中利用background:属性加载图片到div里并设置水平垂直居中，还是头一次。也不知道符不符合要求，感觉css相关知识亟待复习。
source-map的相关学习
我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，会造成无法debug的问题。
举例来说，如果压缩等处理过的生产环境中的代码出现bug，调试的时候只能定位到压缩处理后的代码的位置，无法定位到开发环境中的源代码。
sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁。主要是方便开发人员的错误定位。这里的处理操作包括：
I）压缩，减小体积
II）将多个文件合并成同一个文件
III）其他语言编译成javascript，比如TypeScript和CoffeeScript等
常用的几种类型如下：
I）eval ： 每一个模块都执行eval()过程，并且会追加//@ sourceURL
II）eval-source-map：每一个模块在执行eval()过程之后，并且会为每一个模块生成sourcemap文件，生成的sourcemap文件通过DataURL的方式添加
III）cheap-eval-source-map：跟eval-source-map相同，唯一不同的就是增加了”cheap”，”cheap”是指忽略了行信息。这个属性同时也不会生成不同loader模块之间的sourcemap。
VI）cheap-module-eval-source-map：与cheap-eval-source-map相同，但是包含了不同loader模块之间的sourcemap
在了解了webpack中所有的sourcemap基本类型后，我们来分析，如何针对开发环境和生产环境，选择合理的sourcemap属性。
（1）首先在源代码的列信息是没有意义的，只要有行信息就能完整的建立打包前后代码之间的依赖关系。因此不管是开发环境还是生产环境，我们都会选择增加cheap基本类型来忽略模块打包前后的列信息关联。
（2）其次，不管在生产环境还是开发环境，我们都需要定位debug到最最原始的资源，比如定位错误到jsx，coffeeScript的原始代码处，而不是编译成js的代码处，因此，不能忽略module属性
（3）再次我们希望通过生成.map文件的形式，因此要增加source-map属性
总结：
在开发环境中我们使用：cheap-module-eval-source-map
在生产环境中我们使用：cheap-module-source-map。