webpack使用babel，tree-shaking
如果打包的文件在ie运行不能运行，但可以chrome运行babel webpack。
创建.babelrc
webpack配置babel。
webpack总结篇babel polyfill。
一、webpack简介
1.1本更迭webpack打包es6。
image.png
大版本变化babel loader。
image.png
1.2功能进化
WebpackV1
WebpackV2
WebpackV3
V1->V2webpack。
迁移指南https://doc.webpack-webpack阮一峰。
V2->V3
可以更新升级
二、webpack核心概念
2.1Entry
2.2Output
2.3Loaders
常用Loader
编译相关
样式相关
文件相关webpack打包。
2.4Plugins
常用plugins
优化相关webpack打包原理。
功能相关react typescript。
2.5名词
三、初探webpackbabelbird。
3.1使用babel打包es6babel js。
编译ES6/7babel4。
Babelbabel7。
BabelPresetsjs babel优化。
BabelPolyfill
BabelRuntimeTransform3.2打包Typescripttsconfigbabel原理。
Typings3.3提取js的公用代码image.pngbabel7配置。
3.4代码分割和懒加载
**种方法：通过wepack内置方法babel配置。
第二种方法：通过LoaderSpec
import()返回一种方式promise在import需要依赖的明、动态加载模块可以像使用一样传入Promise一样使用import().then()require npm。
此时代码分割场景运行打包loadash提取到vendor中react生命周期。
image.png
这不是我们想要的require。
image.png
image.png
image.png
import()动态加载写法cli。
合并了subPageA和subPageB
image.png
让我们来看看包装后的文件。A、B
image.png
在webpack使用代码分割async异步加载node常用中间件。
image.pngvue指令。
image.png
3.5处理CSS和CSS模块化
引入css
Style-Loader
Style-Loader的optionsCSS-Loader
options
CSS-Moles配置Less/Sass提取CSSimage.pngwebpack教程babel教程。
3.6PostCSSinWebpack例子
3.7Treeshaking
使用场景4，从浅到深Webpack
4.1文件处理
图片处理
处理雪碧图片和压缩图片
处理字体文件
处理第三方JS库
1.providePlugin
以引入jQuery为例
引入本地libs中的jQuery
2.imports-loader
4.2HTMLinwebpack(自动生成HTML)
生成HTML
options
中引入图片
