详解webpack 配合babel 将es6转成es5 超简单实例


Posted in Javascript onMay 02, 2017

今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈。

下面附上流程

创建个文件夹,初始化一下,首先全局安装webpack

npm install webpack --save-dev

然后安装babel

npm install --save-dev babel-core babel-preset-es2015 
npm install --save-dev babel-loader

在当前文件夹内执行安装,然后创建两个文件夹一个src作为源文件夹,一个bin,保存生成的文件夹的列表

在src文件夹内创建一个文件app.js,里面写入现在浏览器不全支持的es6代码

let a = 111; 
let b = 222; 
var xxx = (c,d) => c*d; 
console.log(xxx(a,b));

然后在根目录创建一个文件名为webpack.config.js

module.exports = { 
  entry: './src/app.js', 
  output: { 
    path: './bin', 
    filename: 'app.bundle.js', 
  }, 
  module: { 
    loaders: [{ 
      test: /\.js$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader' 
    }] 
  } 
}

然后再创建一个用于babel调用的文件,名为.babelrc

里面写入

{ "presets": [ "es2015" ] }

然后在当前目录打开cmd,

运行命令 webpack

如果出现绿色的,证明成功了

然后去bin目录里面找到app.bundle.js发现里面下面会有这段代码

function(module, exports) { 
 
"use strict"; 
 
var a = 111; 
var b = 222; 
var xxx = function xxx(c, d) { 
 return c * d; 
}; 
console.log(xxx(a, b));

证明转码成功~~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
jQuery树插件zTree使用方法详解
May 02 #jQuery
JavaScript数据结构学习之数组、栈与队列
May 02 #Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 #Javascript
详解webpack+es6+angular1.x项目构建
May 02 #Javascript
jQuery Tree Multiselect使用详解
May 02 #jQuery
bootstrap的常用组件和栅格式布局详解
May 02 #Javascript
Vuejs实现带样式的单文件组件新方法
May 02 #Javascript
You might like
php Undefined index的问题
2009/06/01 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
JavaScript检测原始值、引用值、属性
2016/06/20 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
Python的Django框架使用入门指引
2015/04/15 Python
python实现在windows服务中新建进程的方法
2015/06/30 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
致垒球运动员加油稿
2014/02/16 职场文书
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
教师党员个人整改措施
2014/10/27 职场文书
党员先进事迹材料
2014/12/19 职场文书
个人维稳承诺书
2015/05/04 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书