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 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
node.js适合游戏后台开发吗?
Sep 03 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
jQuery 选择符详细介绍及整理
Dec 02 Javascript
JS实现加载时锁定HTML页面元素的方法
Jun 24 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
探索node之事件循环的实现
Oct 30 Javascript
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
一个比较简单的PHP 分页分组类
2009/12/10 PHP
linux iconv方法的使用
2011/10/01 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
javascript第一课
2007/02/27 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
详解ES6语法之可迭代协议和迭代器协议
2018/01/13 Javascript
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python random模块用法解析及简单示例
2017/12/18 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
李宁官方网店:中国运动品牌
2017/11/02 全球购物
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
网络工程师面试(三木通信技术有限公司)
2013/06/05 面试题
开会迟到检讨书
2014/01/08 职场文书
大学生演讲稿范文
2014/01/11 职场文书
公司企业表扬信
2014/01/11 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
财务会计专业自荐书
2014/06/30 职场文书
办理信用卡收入证明范例
2014/09/13 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
运动会广播稿200字
2014/10/18 职场文书
护士辞职信怎么写
2015/02/27 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
python开发飞机大战游戏
2021/07/15 Python
nginx容器方式反向代理实战
2022/04/18 Servers