loader作用
- 负责将非js文件，转换成webpack可以处理的文件
babel-loader
- 作用：使用babel-loader处理js文件，会将es5以上的语法进行转义(无法转义es6 API)
- babel-loader必须和babel-core结合使用，babel-core封装了babel-loader需要用到的api
- babel-loader和babel-core的版本需要对应(core需要比loader高一个版本才能用)
- npm i babel-loader @babel/core -D
- npm i babel-loader@7.1.5 babel-core -D
- 使用方法：
- 安装npm i babel-loader @babel/core @babel/preset-env -D
- webapck.config.js添加的babel-loader、配置.babelrc
- extend
核心库使用了@babel/core，需要使用@babel/preset-env @babel/polyfill，不能使用babel-preset-env、babel-polyfill这类老版本插件
配置babel-loader
- loader属于第三方模块，需要配置module属性，及对应的规则
module: {
rules: [{
test: /\.js$/, // 处理后缀名为js的文件
use: 'babel-loader', // 使用babel-loader进行处理
exclude: /(node_modules)/ //排除node_modules下的文件
}]
}
@babel/preset-env
- 作用：对babel-loader进行相关的配置。
- 使用： npm i @babel/preset-env -D
- 根目录下创建.babelrc文件
{
"presets": ["@babel/preset-env"] // 智能转义，无需微观管理
}
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions"] // 针对每个浏览器最后的两个版本进行转义
}
}
]
]
}
@babel/ployfill
- effect: 将es6的api转为es5浏览器可运行的代码。
- 如Array.from在ie11下无法使用，使用polyfill后，可在ie11下正常运行Array.from
- 用法：
- npm i @babel/ployfill -D
- 在webpack入口文件最顶部引用import '@babel/ployfill';
extend
- @babel/ployfill属于全局垫片，使用后会导出打包文件变大很多倍，会造成全局污染。
- 可使用@babel/runtime局部垫片解决，@babel/runtime属于按需加载，适用于开发第三方lib
- 用法：
- npm i @babel/runtime @babel/plugin-transform-runtime -D
- 在.babelrc文件中添加plugins
{
"presets": [ ... ],
"plugins": [
"@babel/transform-runtime"
]
}
