// 配置文件使用commonjs规范 module.exports = { // 入口，是一个对象 entry: { app: './app.js' // 相对路径 }, // 输出 output: { // 带五位hash值的js filename: '[name].[hash:8].js' }, // 指定loader module: { // rules中的每一项是一个规则 rules:[ { test: /\.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理 use: { loader: 'babel-loader', // 使用bable-loader来处理 options: { // 指定参数 presets: [ ['babel-preset-env', { targets: { browsers: ['> 1%', 'last 2 version'] //具体可以去babel-preset里面查看 } }] ] // 指定哪些语法编译 } }, exclude: '/node_module/' // 排除在外 } ] } }
app.js和编译之后带hash的js
// app.js let func = () => {}; const num = 30; let arr = [3, 4, 5, 6]; let newArr = arr.map(item => item * 2); // 将以前数组每一项*2 console.log(newArr); // ==================https://www.jb51.net// // 编译之后（直接截取了编译的代码） "use strict"; var func = function func() {}; var num = 30; var arr = [3, 4, 5, 6]; var newArr = arr.map(function (item) { return item * 2; }); // 将以前数组每一项*2 console.log(newArr);
babel的两个插件：Babel Polyfill 和 Babel Runtime Transform
用来处理一些函数和方法（Genertor,Set,Map,Array.from等未被babel处理，需要上面的两个插件）
Babel Polyfill（全局垫片），npm install babel-polyfill --save, 使用：import "babel-polyfill";
Babel Runtime Transform（为开发框架准备），npm install babel-plugin-transform-runtime --save, npm install babel-runtime --save
新建一个.babelrc来进行配置
app.js里面新增代码
import "babel-polyfill"; let func = () => {}; const num = 30; let arr = [3, 4, 5, 6]; let newArr = arr.map(item => item * 2); // 将以前数组每一项*2 console.log(newArr); // 需要babel-polyfill arr.includes(8); // Genertor 函数 function* func2() { }
webpack配置
// 配置文件使用commonjs规范 module.exports = { // 入口，是一个对象 entry: { app: './app.js' // 相对路径 }, // 输出 output: { // 带五位hash值的js filename: '[name].[hash:8].js' }, // 指定loader module: { // rules中的每一项是一个规则 rules:[ { test: /\.js$/, // 值一个正则，符合这些正则的资源会用一个loade来处理 use: { loader: 'babel-loader', // 使用bable-loader来处理 options: { // 指定参数 } }, exclude: '/node_module/' // 排除在外 } ] } }
.babelrc文件配置
{ "presets": [ ["babel-preset-env", { "targets": { "browsers": ["> 1%", "last 2 version"] } }] ], "plugins": ["transform-runtime"] }