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 相关文章推荐
基于jquery的loading 加载提示效果实现代码
Sep 01 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
javascript中数组的多种定义方法和常用函数简介
May 09 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
微信小程序如何实现五星评价功能
Oct 15 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
Vue+axios封装请求实现前后端分离
Oct 23 Javascript
JS如何监听div的resize事件详解
Dec 03 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 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
php中socket的用法详解
2014/10/24 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
教大家制作简单的php日历
2015/11/17 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
JavaScript 面向对象之命名空间
2010/05/04 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
浅谈Python中函数的参数传递
2016/06/21 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
Python3解释器知识点总结
2019/02/19 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python爬虫scrapy框架的梨视频案例解析
2021/02/20 Python
打架检讨书50字
2014/01/11 职场文书
优良学风班总结材料
2014/02/08 职场文书
给市场的环保建议书
2014/05/14 职场文书
绿色环保口号
2014/06/12 职场文书
信息员培训方案
2014/06/12 职场文书
教师师德考核自我评价
2014/09/13 职场文书
个人先进材料范文
2014/12/30 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
学生检讨书范文
2019/06/24 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
Java基于字符界面的简易收银台
2021/06/26 Java/Android
vue打包时去掉所有的console.log
2022/04/10 Vue.js
windows系统安装配置nginx环境
2022/06/28 Servers