详解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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
js比较日期大小的方法
May 12 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 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
农民和部队如何穿矿
2020/03/04 星际争霸
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
js验证电话号码与手机支持+86的正则表达式
2014/01/23 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
详解Axios统一错误处理与后置
2018/09/26 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python显示生日是星期几的方法
2015/05/27 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
python实现实时监控文件的方法
2016/08/26 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
python利用线程实现多任务
2020/09/18 Python
高中化学教学反思
2014/01/13 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
68句权威创业名言
2019/08/26 职场文书
springboot中一些比较常用的注解总结
2021/06/11 Java/Android
Minikube搭建Kubernetes集群
2022/03/31 Servers