css工程化
css预编译器（less、sass）
less是一种更加简洁的样式代码，它非常像css，但又不太一样，它让编写样式变更容易
less常用的功能：
变量、嵌套、混合
less代码虽然好，但是他无法被浏览器识别，因此需要一个工具将其转换为纯正的css代码
由于node环境具有读写文件的能力，于是在node环境中可以轻松的完成文件的转换，npm上有一个包叫做less，less包提供了一个cli工具lessc ,它运行在node环境中，通过它可以完成对less代码的转换
lessc index.less index.css
安装的时候最好不要全局安装，全局安装对版本不好控制，最好本地安装
node环境在前端工程化中，充当了一个辅助的角色，转换代码，称之为编译（compile），转换代码的工具，称之为编译器
webpack是用来搭建前端工程的，运行在node环境中，具体来说，就是以某个模块作为入口，根据入口分析出所有模块的依赖关系，然后对各种模块进行合并、压缩，形成最终打包结果；在webpack中，一切皆是模块
webpack的好处
1、可以大胆的使用任意模块化标准
无须担心兼容性问题，因为webpack完成打包后，已经没有了任何模块化语句
2、可以将一些非js代码也视为模块
这样可以对css、图片等资源进行更细粒度的划分
3、在前端开发中，也可以使用npm
webpack不会运行你的源代码，无论是你自己写的模块，还是通过npm安装的模块，webpack一视同仁，统统视为依赖，最终合并到打包结果中
4、非常适合单页应用的开发
单页应用是前端用户体验最好的web应用；所谓单页应用，是指只有一个html页面，页面没有任何内容，所有的内容均靠js生成；要优雅的实现单页应用，最好依托于前端框架，比如vue、react
webpack通过插件（plugin）和加载器（loader）将这些技术整合在一起
工程中的一些文件概述：
1、.browserslistrc 表示适配的浏览器范围，会被工程化中的其他技术所应用
2、babel.config.js babel的配置文件，做js降级处理
3、postcss.config.js postcss的配置文件，做css代码转换
4、webpack.config.js webpack的配置文件，整合其他工程化技术，以及配置打包细节、开发服务器、路径别名等
构建工具的使用
1、学会访问开发服务器查看效果
2、学会js动态获取资源文件路径
import url form '地址'；
img .src = url;
3、学会省略index.js文件和.js后缀名
import './home'//若存在home.js，可省js
import'./movie'//若movie是一个目录，此次导入的是./movie/index.js
4、学会使用别名简化导入代码
import'@/b/bi';//实际导入src/b/bi/index.js
5、学会使用css module
//style是一个对象，里面映射了源码类名和打包类名的关系(避免类名冲突)
import style from './index .module .less';
dom .classList. add(style. container);
6、代码较多时，可以进行分包，将静态依赖，也就是页面一开始加载就希望用户能看见的放在主包中；将一些可以后续加载的写成动态依赖：
import'./cover';//静态依赖，表示该模块需要合并到主打包结果中
import('./movie');//动态依赖，表示该模块可以动态加载，最终的结果会导致该模块行程独立的包
7、跨域问题
1）实际打包部署到服务器中，跨域问题是后端来解决
2）开发过程中的跨域问题解决方法：
首先，在webpack.config.js中，找到下面部分，设置代理：
devServer: {
port: 8080,
proxy: {
'/api': {
// 当请求地址以 api 开头时，代理到另一个地址
target: 'http://www.baidu.com', // 代理的目标地址
changeOrigin: true, // 更改请求头中的host，无须深究，为避免出问题，最好写上
},
},
},
然后，在ajax请求时，仅需给上请求路径即可：
axios.get('/api/movies');
这个时候请求的时候由于没有写协议、主机和端口号，服务器会认为请求的是当前页面的协议、主机和端口号；然后发现/api开头的地址，服务器会代理访问配置的地址
跨域只在浏览器端，由于浏览器有同源策略，服务器没有跨域这个词