0.为什么要对项目打包/编译/构建？
- 一般使用webpack来对项目打包/编译/构建
1. webpack能干什么
可以分析模块开发时所配置的文件依赖，使打包好的文件可以有序的执行
提供各种loader，可以处理各种非js类型的资源文件，一并构建打包。
提供一个开发服务器，方便开发过程中在服务器环境中预览页面，实现免刷新，热替换等功能
2. webpack的认识
webpack是一款模块加载器兼打包工具，它能把各种资源都作为模块来使用和处理，通过使用Webpack解析出模块之间的依赖，将代码打包。
webpack 五个核心概念：
-
Entry
入口(Entry)：指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 -
Plugins
插件(Plugins)：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，
一直到重新定义环境中的变量等。 -
Mode
模式(Mode)：指示 webpack 使用相应模式的配置。参数有：
development–能让代码本地调试运行的环境
production–能让代码优化上线运行的环境
3. webpack构建流程
3.1. 初始化参数： 合并shell或配置文件的参数，得出最总的参数
3.2. 开始编译：用合并得到的参数初始化compiler对象，加载所有配置文件，执行对象的run 方法，开始编译。
3.3. 确定入口，通过entry找到入口文件
3.4. 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理
3.5. 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
3.6. 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
3.7. 输出完成，确定输出的路径和文件名，把内容写到文件系统中
4. module chunk bundle的区别
module–各个源码文件， webpack中一切皆模块
chunk–多模块合并成的代码
bundle-- 最终的输出文件，一般一个chunk对应一个bundle
5. 有哪些常见的Loader？他们是解决什么问题的？
style-loader 将css添加到DOM的内联样式标签style里
css-loader 将css文件变成commonjs模块加载js中
less-loader 处理less 转化为css
sass-loader 处理sass 转化为css
postcss-loader 用postcss来处理CSS
url-loader 处理图片资源
file-loader可以用来帮助webpack打包处理一系列的文件
babel-loader 用babel将ES6文件转换为ES5
eslint-loader：通过 ESLint 检查 JavaScript 代码
6. 有哪些常见的Plugin？他们是解决什么问题的？
html-webpack-plugin 基本作用就是生成html文件
mini-css-extract-plugin 提取js中的css成单独文件
define-plugin：定义环境变量
7. loader、plugin的区别
loader 原生的wenpack 只有解析js 的能力，loader就是让webpack 有了解析其他文件格式能力
plugin 是webpack 的插件，让其有更大的灵活性，在webpack 运行的周期中，会广播出多个事件，plugin则监听这些事件，改变webpack 的api 输出。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
