webpack4系列笔记之（7）babel 处理es6语法

一、babel使用场景

当代码中写有es6语法时，webpack无法识别，打包后低版本浏览器将无法解析，会报错，代码例如：

const arr = [
new Promise(() => {}),
new Promise(() => {})
];

arr.map(item => {
	console.log(item);
});

此时babel就派上用场了，babel会将es6代码转成es5代码，打包后浏览器可以解析，就不会报错了

二、webpack简单配置babel

1、下载安装包

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

2、简单配置

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

// presets: [['@babel/preset-env', {
// 	targets: {
//      chrome: "67",
//    },
// 	useBuiltIns: 'usage'
// }]]


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$/, 
			//  排除node_modules中js文件
			exclude: /node_modules/, 
			loader: 'babel-loader',
			/*
		      js兼容性处理： babel-loader @babel/preset-env @babel/core
		        1.基本js兼容性问题  ---> @babel/preset-env
		        问题：只能转换基本语法  如promise高级语法不能转化
		        2.全部js兼容处理  --->  @babel/polyfill
		        问题：只是解决部分的js兼容问题，但是将全部的兼容性代码引入，体积太大了~
		        3.需要做兼容性处理的做按需加载  ---  core-js
		      */
			options: {
				presets: [[
					'@babel/preset-env',
					{
						// 按需加载
						useBuiltIns: 'usage',
						// 指定core-js  版本
						corejs: {
							version: 3
						}
						// 指定兼容性做到哪个版本浏览器
						targets: {
							chrome: "60"
						}
					}
				]]
			}
		}, {
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			} 
		},
		{
			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()
	],
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	}
}