什么是Webpack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。

  1. 代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
  2. 文件优化：压缩JavaScript、CSS、HTML代码，压缩合并图片等。
  3. 代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  4. 模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
  5. 自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
  6. 代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
  7. 自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建给前端开发注入了更大的活力，解放了我们的生产力。

常用配置项

  1. 配置文件
    1. 多种配置类型
    2. 入口
    3. 输出
    4. hash、chunkhash、contenthash
    5. 模式
    6. 自动生成页面
  2. loader
    1. css-loader和style-loader
    2. sass-loader和less-loader
    3. postcss-loader 自动加-moz、-ms、-webkit等浏览器私有前缀
    4. babel-loader
    5. file-loader和url-loader
    6. html-withimg-loader
    7. vue-loader
  3. 搭建开发环境
    1. plugins
    2. clean-webpack-plugin
    3. mini-css-extract-plugin
    4. optimize-css-assets-webpack-plugin
    5. copy-webpack-plugin
    6. ProvidePlugin
    7. loader和plugin的区别

TODO…

  • 打包体积缩减
  • 分包
  • DLL
  • 手动配两个环境，三个配置文件（base、dev、prod）
  • 编译加速
  • dev-server + mock