webpack 1.0.4 juejin.cn/post/684490…
通过对webpack1.0.4的操作和配置，就了解了plugins插件的功能和作用。
通过对webpack1.0.4以及之前的内容操作和配置，我想你已经开始尝试自己去配置webpack并做代码的打包，在打包之后，如果没有任何的报错信息，而运行代码时出现错误，那么大多是代码书写错误。js文件已经打包，在控制台打开后无法直接定位问题代码。怎么能够快速定位这个错误呢？webpack提供了devtool的配置。
webpack- sourceMap
webpack sourceMap 中文官方网站 www.webpackjs.com/plugins/sou…
由于我的vpn最近被封禁，webpack英文官方网站无法访问。查看webpack中文官方网站devtool配置被SourceMapDevtoolplugin所替代推荐。以下是我自己devtool的配置，没有按照中文官方网站配置。
配置devtool分为两种模式。
mode:'development' //开发模式
devtool:'cheap-module-eval-source-map' ⚠️
mode:'production'. //线上模式
devtool:'cheap-module-source-map' ⚠️
⚠️无论是开发者模式还是线上模式，devtool的配置项都是可以组合的。
source-map // 生成一个映射关系文件，定位到第几行第几个字符的代码有问题。
inline-source-map // 不生成映射关系文件，在js文件底部生成base64字符串，定位到第几行第几个字符的代码有问题。
cheap // 只定位到第几行代码有问题，只针对业务代码，不检测第三方模块的代码。性能提升。
module // 检测第三方模块代码问题。
eval // 通过eval的方式直接指向有问题的代码，性能最好，但不全面。
可以根据自己的需求，自行搭配使用devtool的配置项。
关于source-map的原理在面试中也经常被问到。下面是阮一峰关于source-map的详解。
www.ruanyifeng.com/blog/2013/0…
Webpack - Babel
babeljs 官网 babeljs.io/
ES6语法新增的新特性，比如箭头函数在IE低版本浏览器，和国内厂商的浏览器中是不能解析的。这时就需要把ES6语法转换为ES5语法，这样在所有的浏览器上就能够解析ES6语法了。
babel提供了很多使用场景，由于是在webpack中使用。
终端输入 npm install --save-dev babel-loader @babel/core
@babel/core // babel的核心库，把js代码转换成AST抽象语法树
exclude // 去除依赖文件夹之内的文件，第三方资源已经做好了ES6转换ES5
⚠️babel-loader不能像其他的loader一样，不能直接转换为ES5。只是打通了ES6和ES5之间的桥梁。还需要下载babel的 preset-env
终端输入 npm install @babel/preset-env --save-dev
AST编译基础(英文)notes.eatonphil.com/compiler-ba…
options中通过数组的形式，配置使用。
如果使用Promise或者map，低版本浏览器仍不能去解析，因为低版本浏览器不存在这些内容，这时就需要babel polyfill注入这些内容，但是babel polyfill截至Babel 7.4.0版本后，该软件包已被弃用。这时就需要babel的 import "core-js/stable"; import "regenerator-runtime/runtime"模块来替代babel polyfill。polyfill本身就是stable版本的core-js和regenerator-runtime的合集，即import "@babel/polyfill"等同于：import "core-js/stable"; import "regenerator-runtime/runtime"
终端输入 npm install --save @babel/runtime 下载runtime
终端输入 npm install core-js -D 下载corejs
corejs //使用第三版本。
在使用js的页面引入:
import 'core-js/stable';
⚠️ 如果把 useBuiltIns 放到 .babelrc中那么就不需要引入core-js 和 runtime了。
关于polyfill 还有另外一种配置模式就是plugin-transform-runtime
这种模式避免了全局变量的污染，通过闭包的方式注入。通常这种模式不适用功能代码的开发，开发第三方类库或者UI组件库时适用。唯一的缺点就是不能实例化方法，而.....等等corejs3是在corejs2的基础上进而解决了之前无法实例方法的窘况，同时也保持了不污染全局空间，搭配使用就很合理了。
终端输入 npm install --save-dev @babel/plugin-transform-runtime 下载plugin-transform-runtime
由于options中内容过多，所以在根目录新建一个 .babelrc 文件,把options中的内容直接复制进去。
删除js文件引用的
import 'core-js/stable';
当babel版本小于7.4.0时:
开发类库, 选择 @babel/runtime ,内部项目，@babel/polyfill。
当babel版本大于 7.4.0时:
选择 @babel/runtime。
至此ES6转换ES5就结束了。
