webpack_(2) 配置 ES6 转 ES5

参考：

https://webpack.js.org/loaders/babel-loader/

 

1、安装 babel 相关依赖

npm i babel-loader @babel/core @babel/preset-env --save-dev

 

2、添加 babel 配置

在 webpack.config.js 中添加 babel 的配置，以便于打包的时候将 ES6 代码转译成 ES5 代码。

const path = require('path');

module.exports = {
    /*设置要打包的源文件*/
    entry: './src/main.js',
    /*设置打包后的路径及输出文件名*/
    output: {
        /*输出路径，__dirname 为当前文件所在目录所在的路径*/
        path: path.resolve(__dirname, 'dist'),
        /*输出文件名*/
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                /*匹配文件类型*/
                test: /\.m?js$/,
                /*排除目录*/
                exclude: /(node_modules|bower_components)/,
                /*要使用的 loader 及配置项*/
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

保存修改，然后再次执行 npm run build 命令再次打包，然后查看打包生成的 bundle.js 文件的内容，能够查看到原来 ES6 的代码都已经转义成 ES5 的代码了（可以看到变量定义都使用的 var 关键字，以及之前的类定义已经转换成 function 方式定义）。