webpack知识点

• 基本配置
  1. 定义一个common配置、dev（开发环境）配置、prod（生产环境）配置。分别在这两个环境里面引入common文件。
  2. 处理css（style-loader、css-loader） img（postcss-loader）等等
  3. 拆分配置和merge
• 高级配置
  1. 多入口
  2. 抽离css文件
  3. 抽离公共代码、第三方库
  4. 懒加载、
  5. 处理JSX
  6. 处理Vue
• 优化打包效率
  1. 优化babel-loader、happyPack、用IngorePlugin忽略无用文件（new webpack.IngorePlugin(目录)）
  2. 自动刷新、热更新、DllPlugin(用于生产环境)
• 优化产出代码
  1. 小图片base64编码
  2. bundle加hash
  3. 懒加载
  4. 提取公共代码
  5. 使用CDN加速
  6. IgorePlugin
• 构建流程概述
• babel

webpack的功能

1. webpack实现异步加载JS
2. 优化构建速度
3. 用IngorePlugin忽略无用文件
4. 配置热更新
5. 抽离公共代码
6. 抽离css文件
7. 配置多入口

前端为何要进行打包构建

• 体积更小、加载更快

• 编译高级语言或语法

• 兼容性和错误检查

• 统一、高效的开发环境

• 统一的构建流程和产出标准

• 集成公司构建规范（提测、上线等）

module chunk bundle的区别

• module-各个源码文件、webpack中一切皆模块
• chunk-多模块合并成的
• bundle-最终输出的文件

loader和plugin的区别

• loader模块转换器、如less至css
• plugin扩展插件、如HtmlWebpackPlugin