详解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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
Javascript闭包实例详解
Nov 29 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
Jun 12 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
Js类的构建与继承案例详解
Sep 15 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 MVC模式在网站架构中的实现分析
2010/03/04 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
2017/01/17 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
2019/05/16 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python数据类型详解(二)列表
2016/05/08 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
django最快程序开发流程详解
2019/07/19 Python
dpn网络的pytorch实现方式
2020/01/14 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Python request中文乱码问题解决方案
2020/09/17 Python
python os.rename实例用法详解
2020/12/06 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
竞选班长自荐书范文
2014/03/09 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
医学生自荐信范文
2015/03/05 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书