发现虽然前端的东西比较杂乱，但是使用Webpack搭建项目，不写特定的很复杂的配置，只是创建一个单页面应用的开发环境，按照官方文档来，倒也很简单。 Babel 7 与配置 PostCSS与配置 总结Webpack配置 安装Babel 7 一套东西：webpack 4.x | babel-loader
在上一章还是使用Gulp来启动Webpack的任务，在这一章发现这个教程的很多地方都过期了，尤其是Webpack+Babel的地方。 而且Webpack现在越来越流行，因此这一章开始转向使用Webpack来构建工作流。 Babel做的事情，就像PostCss对CSS做的事情，用一些浏览器并不能解析组
在搞定了CSS工作流之后，前端三剑客还有一个重要的JavaScript也需要工作流。 安装Webpack 为项目配置Webpack export与import Webpack自动监听文件改变 异常处理 安装Webpack 很久以来，JS都是像脚本一样随写随用，开发比较随意，因为没有很工程化的东西。
Icon Sprites Gulp配置字体精灵任务 拼合字体精灵文件到样式文件中 使用字体 Gulp执行一系列任务 Icon Sprites 我们的页面里使用了很多图标文件，每个图标文件都是一个svg文件。页面在加载的时候，如果图标文件有很多，会一个个加载，比较慢，因为切换下载不同的文件也有开销。
页面两侧适当留白，不能太空 图片可以考虑显示为块级元素 各个大区域内留白 our-begging区域详细调整 两列浮动显示 WebStorm支持PostCss格式文件 适当留白 一般页面即使背景伸展到整个页面的宽度，其内容一般也聚焦在中心，这是由于人在阅读的时候，如果一行太长需要转头，体验就会较差。
移动端优先开发在不同的语境下有着不同的含义，学习一下如何将这个例子按照移动优先开发的原则，编写移动端优先的CSS样式。 移动端开发的核心就是，页面必须适合所浏览该页面的设备。在最早的时候可能是先开发PC端，然后是移动端，但随时开发实践经验的不断总结，以及移动端设备的发展，现在的开发，一般都是从小尺寸
每次更改完样式，需要手工刷新页面才行，如果用过Bracket等开发工具的会知道，有一个功能是动态展示，只要保存，就会自动更新页面显示，Gulp通过Browsersync这个插件也可以实现该功能。 安装Browsersync和修改Gulp任务 WebStorm中配置项目 结构化Gulp任务文件 处理G
来写一个CSS工程实例感受一下前端工程化的便利。顺便也复习一下CSS。 项目文件结构 分离CSS文件与导入CSS文件 BEM理念与拼接类名 编写CSS样式 项目文件结构 这个项目的例子采用了Udemy课程第五部分的例子，使用WebStorm创建新的Node.js项目，然后把项目的源代码复制进来。打开
Gulp其实就是一个实现自动监听文件变化，调用插件来进行编译各种工程文件的工具。本质上和webpack是一样的。只不过配置的内容更加详细。 Gulp主要是通过安装插件，然后在gulp的任务文件里定义好需要监听的文件内容，然后调用插件进行预处理，最后在指定的位置生成最终工程文件。 Udemy的课程没有
前端工程化 搞Web开发，想要当全栈工程师，前端也是必须要过去的坎。别的先不说，Java+JavaScript两大语言都要练好。 刚学Web开发的时候，自己可以写页面，用jQuery，后端渲染，但是当时还没有前后端分离。 现在要用Vue搞前后端分离，几乎所有的Vue教学都要用到Webpack等开发，
