P11.8-webpack配置babel-loader ES6转ES5

P11.8-webpack配置babel-loader ES6转ES5

1.概述

ES6语法在版本低的浏览器中可能还不支持，所以在构建项目的时候需要将ES6语法转为ES5，下面就来介绍ES6转ES5

2.创建项目

创建项目参考《P11.5-webpack配置css-loader》
P11.5-webpack配置css-loader地址：https://brucelong.blog.csdn.net/article/details/111084839

3.安装babel-loader

3.1.安装babel-loader

babel-loader插件实现了ES6转ES5，下面就来安装这个插件

#进入到项目根路径下
cd \06-webpack的babel-loader

#安装babel-loader
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

3.2.配置babel-loader

打开项目的webpack.config.js文件，添加babel-loader的配置。

// 导入path模块，这个path会自动从我们安装node包中找到path导出的模块
const path = require('path')

// webpack模块化默认使用的是CommonJS
module.exports = {
  // 入口：将webpack打包命令中源文件入口路径配置到这里
  entry: './src/main.js',
  // 出口：将webpack打包命令中输出文件路径配置到这里
  output: {
    // ./dist改写为绝对路径, path.resolve()获取绝对路径的方法，__dirname：表示当前文件的绝对路径
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js'
  },
  // 配置webpack扩展插件loader
  module: {
    rules: [
      {
        // 正则匹配以css结尾的文件
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      // 配置babel-loader
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      }
    ]
  }
  
}

4.构建预览项目

4.1.构建项目

#进入到项目根路径下
cd \06-webpack的babel-loader

#安装babel-loader
npm run build

4.2.检查bundle.js

查看dist文件夹下生成的bundle.js文件，里面已经没有我们定义的const类似的变量全部转为var定义的变量。