webpack 学习总结

理解

• webpack:  是一个js打包工具， 从入口开始，通过递归的方式构建其依赖图谱，然后打包
• loader: 处理非js文件，将非js类型模块转换为 js模块
• plugins: 优化处理打包好的js, 一些类型转换之外的关于打包结果的处理

功能支持

1. 多页应用单页应用的打包
   1. 通过配置 entry 为单入口还是多入口来决定
   2. 一个入口即一个页面
2. es5+ 新语法支持
   1. 通过babel-loader 处理新语法
   2. babel-preset-env : babel-插件预设
3. babel 插件的集合，由于我们处理es5+需要配置很多插件，单独配置很麻烦
   1. 目前不支持 stage-x 的插件，如需配置需要单独配置
4. babel-preset-react : 解析react jsx语法
   1. babel-polifill : 处理es6+ 的api 
      1. 不要重复注入，否则会报错
      2. 如果不是单独引入cdn链接话，webpack打包时最好配置为 按需加载，减少打包文件体积
   2. babel-runtime: 处理es6+的 预发 
      1. const  箭头函数等
5. babel-plugin-syntax-dynamic-import
   1. 支持js文件的异步按需加载
      1. webpack支持语法：require.ensure
      2. es7语法： import(/*webpackChunkname: "chunkName"*/, 文件路径)；
6. babel-plugin-import: 组件按需加载
   1. 原理：通过语法转换，将引用方式转换为，单个模块引入的方式
7. css处理
   1. less scss, css预处理工具的支持
      1. less,less-loader, scss-loader
   2. css文件提取
      1. mini-css-extract-plugin 
   3. postcss-loader
   4. 优化移动端开发体验，px2vw
      1. autoprefixer ： 增加浏览器前缀
   5. css 模块化
      1. 注意在使用外部库的时候需要注意，不要讲库文件的样式文件
      2. 处理方法：将node_modules下引入的文件单独配置loader处理，不进行模块化
8. 本地开发环境的搭建
   1. webpack-dev-server: 起本地服务
      1. hot: 热加载
      2. react-hot-loader
      3. webpack-dev-server:
         1. hot: true
      4. webpack.HotModulesReplacementPlugin
      5. css-hot-loader
         1. css样式热加载
9. 通用文件的提取: 将多次引用的文件打包到公共文件，减少打包文件体积
   1. splitChunks:

优化打包速度

1. webpack-dll
   1. 缓存提取公共文件，避免重复文件的重复打包

1. webpackHappy
   1. 利用多线程打包，