今日总结
上午吴老师组织进行了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。