webpack中的babel-loader

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/07/10/webpack%E4%B8%AD%E7%9A%84babel-loader/

摘要

本文主要讲述了：

作用
安装
配置

正文

作用

在webpack中使用babel

安装

#!/usr/bin/env bash

npm install --save-dev babel-loader @babel/core @babel/preset-env
npm install core-js regenerator-runtime

配置

babel-loader的配置可以写在webpack.config.js里，也可以写在babel.config.js里。

示例：

learn_webpack/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
    ],
  },
};

learn_webpack/babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          ie: 9,
        },
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
  ],
  plugins: [],
};

示例：

learn_webpack/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    targets: {
                      ie: 9,
                    },
                    useBuiltIns: 'usage',
                    corejs: 3,
                  },
                ],
              ],
              plugins: [],
            },
          },
        ],
      },
    ],
  },
};