webpack,babel

 

 

 

 

结合代码过一下这几个配置项

 

babel 处理es6 到 es5 兼容浏览器

postcss需要配置如下否则无法生效 需要npm install 相关依赖

 

webpack优化 小图片用base64直接加载 减少网络请求

 

多入口

抽离CSS文件 需要npm install 相关依赖

抽离公共代码和第三方代码

 

优化产出代码

1. 小图片用base64产出
2. bundle加hash
3. 懒加载   异步加载
4. 提取公共代码(避免重复打包,减小体积)
5. IgnorePlugin 减小打包体积   比如ignore掉monent库中不需要的语言包,单独引入需要的语言包
6. 使用CDN加速  (1)第一步 打包出来的引用js的前缀  

   (2)第二步  把这些css文件,js文件都上传到cdn服务器上  图片也能用cdn的地址

7. 使用production  mode设置成production 

   Tree-Shaking 删除没用到的方法,类

   只有静态引入才能 Tree-Shaking

 

es6 module 静态引入 commonjs动态引入

8.Scope Hosting

 

babel

 

基础配置