「梳理」webpack

1. webpack的构建流程？

步骤	解释
初始化参数	从配置文件、shell参数中读取，与默认的参数结合得出最终的参数
开始编译	创建compiler对象，执行compiler对象 run 方法
确定入口	根据entry 找到所有的入口文件
编译模块	从entry开始，对每个module进行loader编译，转译成标准的js内容; 再找到该module的依赖module, 递归进行编译解析
完成模块编译	将loader加载完成的module进行编译，收集其中的依赖关系，生成AST树
输出资源	根据入口和module依赖关系，组装成一个个包含多个module的chunk
输出完成	确定好输出内容后，根据配置确定输出路径和文件名

 

2.Webpack和babel的区别?

分类	定义
webpack	模块化打包构建工具，是多个loader 和plugin的集合
babel	Js 新语法的「编译工具」， 不关心模块

3.Webpack中loader和plugin区别？

分类	定义
loader	「模块」转换器。 将『非js模块』转换成webpack可以识别的js模块( 因为webpack只认识js)；将所有类型的文件，转换成应用程序的依赖图 babel-loader :将 「es6语法 」转换成浏览器可以识别的「 es5语法」 file-loader : 通常被用来处理“ 图片，字体等其他格式 ” 的文件 css-loader : 导入所有@import语法的css, 处理css引入的图片url, 实现css模块化 ps : 执行顺序： 「 从后往前 」
plugin	「扩展」插件。(例如“打包优化、资源管理”)，webpack运行到某个时刻，会自动做一些事情（类似于react/vue的生命周期） cleanWebpackPlugin: 每次构建前，清空output的文件 HtmWebpackPlugin:  打包结束后，自动生成html文件，把打包生成的js模块引入该html中 CompressionWebpackPlugin :   构建时，帮助生成压缩文件，用于gzip MiniCssExtractPlugin :  抽离css文件，将css单独打包成一个文件

4. Webpack中module、chunk、bundle的区别？

分类	定义
module	各个「源码文件」， webpack中一切皆模块
chunk	多模块合成的，webpack打包过程中module的集合（entry或import的文件）
bundle	打包完成后，最终的输出文件

5. Webpack配置多入口文件？

6 . 为何要进行打包和构建？

1. 体积更小（Tree-shaking, 压缩， 合并），加载更快

2. 编译高级语言或语法（es6, ts, scss）

3. 兼容性和错误检查（eslint，polyfill）

4. 统一的构建流程，开发环境和规范

7 . Webpack中优化构建速度？

| 分类 | 定义 | | ----- | ----- | | 优化化速度 （生产环境) | 优化babel-loader：  babel-loader添加cacheDirectory属性，开启缓存 | 优化化速度 （生产环境)| IgnorePlugin： 指定一些模块不被打包进去 | 优化化速度 （生产环境)| noParse： 不去解析属性值代表库的依赖，避免重复打包 | 优化化速度 （生产环境)| 多进程打包（ happyPack）： 在webpack和loader间多加了一层use: [‘happypack/loader?..’] | 优化化速度 （生产环境)| 优化压缩（ ParallelUglifyPlugin）： | 优化化速度 （生产环境)| 自动启用tree-shaking ：  开启了mode:production自动开启，运行过程中分析模块间导入导出，确定未被使用的模块，将其删除|
优化速度（开发环境）| 自动刷新： 整个网页全部刷新，速度慢，状态丢失| 优化速度（开发环境）| 热更新（ HotModuleReplacementPlugin ）：  新代码生效，网页不刷新，状态不丢失 | 优化速度（开发环境）| 动态链接库（ DllPlugin）： webpack已内置，打包dll文件，使用dll文件，第三方模块预打包, 拆分了bundle | 优化 产出代码 | 小图片base64编码 | 优化 产出代码 | bundle加hash | 优化 产出代码 | 懒加载： webpack 默认支持 | 优化 产出代码 | 提取公共代码 | 优化 产出代码 | 使用CDN加速 | 优化 产出代码 | IgnorePlugin | 优化 产出代码 | 使用production | 优化 产出代码 | Scope Hosting: 多个函数集合成一个函数 |