Babel处理es6语法

npm install --save-dev babel-loader @babel/core

npm install @babel/preset-env --save-dev // 语法转义

npm install --save @babel/polyfill  // 往低版本浏览器中添加缺失的js对象和方法

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/, // 第三方的不做转义
        use: {
          loader: "babel-loader", // babel-loader并不能将es6转成ES5，所以还需要下方的插件
          options: {
            presets: ['@babel/preset-env']// 语法转义，但是只有这些还不够，这里只是转义，还需要将一些低版本的浏览器缺失的js方法和对象都添加到低版本浏览器中
          }
        }
      }
    ]
  }

import "@babel/polyfill"; 在js文件中引入， 但是这样直接引入过大，有时候不需要这么多的配置，所以需要 

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/, // 第三方的不做转义
        use: {
          loader: "babel-loader", // babel-loader并不能将es6转成ES5，所以还需要下方的插件
          options: {
            presets: [['@babel/preset-env'], {
                useBuiltIns: 'usage' // 通过这个配置来优化，只添加自己需要的内容到低版本浏览器
            }]
          }
        }
      }
    ]
  }

presets还有其他的配置项 如果是业务类型的代码使用presets即可

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/, // 第三方的不做转义
        use: {
          loader: "babel-loader", // babel-loader并不能将es6转成ES5，所以还需要下方的插件
          options: {
            presets: [['@babel/preset-env', {
                "targets": {
                   "chrome": "67", // 浏览器版本大于67就不需要做babel了
                },
                "useBuiltIns": "usage", // 通过这个配置来优化，只添加自己需要的内容到低版本浏览器
            }]]
          }
        }
      }
    ]
  }

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

npm install --save @babel/runtime

npm install --save @babel/runtime-corejs2

如果是插件库类型的代码使用plugins runtime即可， 因为在import "@babel/polyfill";会污染全局环境

module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/, // 第三方的不做转义
        use: {
          loader: "babel-loader", // babel-loader并不能将es6转成ES5，所以还需要下方的插件
          options: {
            "plugins": [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    "corejs": 2,
                    "helpers": true,
                    "regenerator": true,
                    "version": "7.0.0-beta.0"
                    }
                ]]
          }
        }
      }
    ]
  }

 如果一直配置babel的内容 options中的内容会特别多，所以需要建立.babelrc文件

在Babel执行编译的过程中，会从项目的根目录下的 .babelrc文件中读取配置。.babelrc是一个json格式的文件。
在.babelrc配置文件中，主要是对预设(presets) 和 插件(plugins) 进行配置。.babelrc配置文件一般为如下：

{
  "plugins": [
                [
                  "@babel/plugin-transform-runtime",
                  {
                    "corejs": 2,
                    "helpers": true,
                    "regenerator": true,
                    "version": "7.0.0-beta.0"
                    }
                ]]
   presets: [
        [
            '@babel/preset-env', {
            "targets": {
                chrome": "67", // 浏览器版本大于67就不需要做babel了
            },
            "useBuiltIns": "usage", // 通过这个配置来优化，只添加自己需要的内容到低版本浏览器
            }
        ],
        "@babel/preset-react"
    ]
}

全量

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
	mode: 'development',
	devtool: 'cheap-module-eval-source-map',
	entry: {
		main: './src/index.js'
	},
	devServer: {
		contentBase: './dist',
		open: true,
		port: 8080,
		hot: true,
		hotOnly: true
	},
	module: {
		rules: [{ 
			test: /\.js$/, 
			exclude: /node_modules/, 
			loader: 'babel-loader',
		}, {
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			} 
		}, {
			test: /\.(eot|ttf|svg)$/,
			use: {
				loader: 'file-loader'
			} 
		}, {
			test: /\.scss$/,
			use: [
				'style-loader', 
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2
					}
				},
				'sass-loader',
				'postcss-loader'
			]
		}, {
			test: /\.css$/,
			use: [
				'style-loader',
				'css-loader',
				'postcss-loader'
			]
		}]
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: 'src/index.html'
		}), 
		new CleanWebpackPlugin(['dist']),
		new webpack.HotModuleReplacementPlugin()
	],
	optimization: {
		usedExports: true
	},
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	}
}