详解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 相关文章推荐
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
js跳转页面方法总结
Jan 29 Javascript
JS表的模拟方法
Feb 05 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
js实现直播点击飘心效果
Aug 19 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP下使用CURL方式POST数据至API接口的代码
2013/02/14 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
javascript数组详解
2014/10/22 Javascript
js使用DOM操作实现简单留言板的方法
2015/04/10 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
js遍历json的key和value的实例
2017/01/22 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
vue-property-decorator用法详解
2019/12/12 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
django 类视图的使用方法详解
2019/07/24 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
顶岗实习计划书
2015/01/16 职场文书
营销计划书范文
2015/01/17 职场文书
早安问候语大全
2015/11/10 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers