webpack编译流程

1. Webpack 的打包过程非常复杂，但大致上可简化为：

• 输入：读入代码入口
• 模块递归处理：经过loader处理，分析处理依赖关系
• 后处理：所有模块处理完成后，进行合并、优化，最终输出chunk
• 输出：将chunk输出

2. 从上述打包流程角度，Webpack 配置项大体上可分为两类：

• 流程类：作用于打包流程，影响编译打包产物
• 工具类：提供工程化工具的配置项

3. 如何借助ESLint、TypeScript、Babel构建工程环境

• ESLinkt：代码风格检查
• TS：编译前代码检查
• Babel：语言转换

4. ESLint、TypeScript、Babel 三种工具都分别提供了独立 CLI 形态的使用方法，为何还需要被接入到 Webpack 工作流程中？这种做法有什么收益？

可以统一配置、简化项目配置和管理的复杂度。方便扩展功能和其他特性。

5. 为什么生产环境和开发环境用webpack处理css的方式不同

• 开发环境中，通过css-loader和style-loader将css样式以内嵌的方式注入js，不会压缩和提取，这样可以更快的重新加载，方便调试和修改。
• 生产环境中，通过css-loader和minicssExtractPlugin将css单独提取到文件中，并压缩和优化，减少文件大小和页面加载速度。