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 相关文章推荐
iframe窗口高度自适应的实现方法
Jan 08 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
laydate.js日期时间选择插件
Jan 04 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
uni-app使用countdown插件实现倒计时
Nov 01 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验证码类代码分享(已封装成类)
2011/07/17 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
Linux下手动编译安装PHP扩展的例子分享
2014/07/15 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
php处理带有中文URL的方法
2016/07/11 PHP
基于php实现的验证码小程序
2016/12/13 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
JavaScript中的函数声明和函数表达式区别浅析
2015/03/27 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Python Web服务器Tornado使用小结
2014/05/06 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
教育技术职业规划范文
2014/03/04 职场文书
感恩教育活动总结
2014/05/05 职场文书
学校班班通实施方案
2014/06/11 职场文书
2014年创卫工作总结
2014/11/24 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers