webpack使用 babel-loader 转换 ES6代码示例


Posted in Javascript onAugust 21, 2017

本文介绍了webpack使用 babel-loader 转换 ES6代码示例,分享给大家,具体如下:

查询各个 loader的使用,可以在官网上查询。https://www.npmjs.com

(一)安装 babel-loader,babel-core。

使用命令

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

因为ES6语法每年都在更新,因此,我们需要一定的规则去转换。

npm install --save-dev babel-preset-latest

(二)首先按照如下层级建立相应文件

webpack使用 babel-loader 转换 ES6代码示例

将测试用的ES6代码放在 app.js,使用CMD语法,将layer嵌入对象layer中。app.js代码如下。

import layer from './components/layer/layer.js';

const App = function () {
  console.log(layer);
}

new App();

layer.js代码如下

function layer(){
  return{
    name:'layer',
    tpl:'testTpl'
  };
}

export default layer;

(三)webpack.config.js代码如下

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
console.log(__dirname);
module.exports = {
  /*context: __dirname,*/
  entry: './src/app.js',

  output: {
    path: './dist',
    filename: 'js/[name]-bound.js'//生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js,main-2ea5b2e9b258a8bbba73.js
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        /*exclude: path.resolve(__dirname, 'node_modules'), //编译时,不需要编译哪些文件*/
        /*include: path.resolve(__dirname, 'src'),//在config中查看 编译时,需要包含哪些文件*/
        query: {
          presets: ['latest'] //按照最新的ES6语法规则去转换
        }
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      filename: 'index.html', //通过模板生成的文件名
      template: 'index.html',//模板路径
      inject: 'body' //是否自动在模板文件添加 自动生成的js文件链接

    })
  ]
};

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

Javascript 相关文章推荐
WordPress JQuery处理沙发头像
Jun 22 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
vue源码nextTick使用及原理解析
Aug 13 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
JavaScript创建对象的七种方式全面总结
Aug 21 #Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 #Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 #Javascript
JS实现身份证输入框的输入效果
Aug 21 #Javascript
Vue自定义指令使用方法详解
Aug 21 #Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 #Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 #Javascript
You might like
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
angularJs的ng-class切换class
2017/06/23 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
详解vue中使用transition和animation的实例代码
2020/12/12 Vue.js
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Python Grid使用和布局详解
2018/06/30 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
django认证系统 Authentication使用详解
2019/07/22 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
python属于软件吗
2020/06/18 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
运动会广播稿60字
2014/01/15 职场文书
物流管理专业推荐信
2014/09/06 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
2015年春节标语口号
2014/12/09 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js