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 写类方式之六
Jul 05 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
使用javascript插入样式
Mar 14 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
浅谈webpack和webpack-cli模块源码分析
Jan 19 Javascript
vue+elementUI实现简单日历功能
Sep 24 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
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
PHP警告Cannot use a scalar value as an array的解决方法
2012/01/11 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
jquery实现图片随机排列的方法
2015/05/04 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python实现统计代码行的方法分析
2017/07/12 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
Python3.5内置模块之os模块、sys模块、shutil模块用法实例分析
2019/04/27 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Python partial函数原理及用法解析
2019/12/11 Python
Python3获取cookie常用三种方案
2020/10/05 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
八一慰问活动方案
2014/02/07 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
节能环保演讲稿
2014/08/28 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书