babel-loader按需加载

安装依赖

npm install -D babel-loader @babel/core @babel/preset-env

Loader 配置

webpack.config.js

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}

1 . 一般情况下的 babel 配置

对于 babel 的配置，我们一般放在 babel.config.json 中，在根目录中新建 babel.config.json。

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage", // 按需引入 corejs 中的模块 
      "corejs": 3, // 核心 js 版本
      "targets": "> 0.25%, not dead" // 浏览器支持范围
    }]
  ]
}

还需要下载的依赖：

npm i core-js@3 --save

2 .优化后的babel 配置

安装依赖

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs3

babel.config.json

{
  "presets": [
    ["@babel/preset-env", {
      "targets": "> 0.25%, not dead" //设置浏览器
    }]
  ],
  "plugins": [
    // 不污染全局，在运行时加载
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}