webpack

webpack

Webpack是一个模块打包工具,主要有5个核心概念

　　1.Entry 入口   指示 webpack 从哪个文件开始构建/打包

　　2.Output 出口  指示 webpack 打包完成的文件输出哪里去

　　3.Loader 加载器

　　webpack 自身能力有限，只能处理 js/json 文件，但是遇到 css/html 等文件就没办法处理;loader 能将 webpack 不识别的文件编译加载成 webpack 能识别的文件，这样才能打包处理

　　4.plugin插件  功能比 loader 更加强大，增强 webpack 的功能 html-webpack-plugin

　　5.Mode模式

　　　　Develpment开发环境

　　　　Production生成环境

 

优化:

　　去除无用的js代码 ---tree shaking 树摇优化

　　比如引入工具函数库(lodush),里面有好多工具函数,开发用的就其中几个,然后还有好多工具函数没用,最终打包就有好多没用的代码,树摇就会去除没用的代码

 　　　　使用树摇的前提:

　　　　　　必须使用 ES6 模块化

　　　　　　开启 production 生产环境模式 -自动激活

 

优化: 兼容性处理

　　1. 使用babel-loader,把ES6的简单转换为ES5的语法,复杂(promise,async)转换不了

　　2. 使用core-js -按需加载兼容性包