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

 更新时间:2017年08月21日 16:55:54   作者:Herry彬  
本篇文章主要介绍了webpack使用 babel-loader 转换 ES6代码 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

本文介绍了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

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

  

将测试用的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文件链接

    })
  ]
};

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

相关文章

  • layui的表单验证支持ajax判断用户名是否重复的实例

    layui的表单验证支持ajax判断用户名是否重复的实例

    今天小编就为大家分享一篇layui的表单验证支持ajax判断用户名是否重复的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 利用jsPDF实现将图片转为pdf

    利用jsPDF实现将图片转为pdf

    这篇文章主要为大家详细介绍了如何利用jsPDF实现将图片转为pdf的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-08-08
  • JS中typeof与instanceof之间的区别总结

    JS中typeof与instanceof之间的区别总结

    本文是对JS中typeof与instanceof之间的区别进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • 微信小程序手机号验证码登录的项目实现

    微信小程序手机号验证码登录的项目实现

    本文主要介绍了微信小程序手机号验证码登录的项目实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • 详解cordova打包成webapp的方法

    详解cordova打包成webapp的方法

    本篇文章主要介绍了详解cordova打包成webapp的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 彻底搞懂JavaScript中的apply和call方法(必看)

    彻底搞懂JavaScript中的apply和call方法(必看)

    下面小编就为大家带来一篇彻底搞懂JavaScript中的apply和call方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路

    扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路

    js的扩展方法是基于原型的,如Array.prototype.XXXX就是给Array扩展XXX方法,然后数组都能使用这个方法了,在对象数组里面经常有根据属性来进行排序的,升序,降序的,下面与大家分享自己写的一个
    2013-05-05
  • js事件驱动机制 浏览器兼容处理方法

    js事件驱动机制 浏览器兼容处理方法

    下面小编就为大家带来一篇js事件驱动机制 浏览器兼容处理方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JavaScript基于面向对象实现的无缝滚动轮播示例

    JavaScript基于面向对象实现的无缝滚动轮播示例

    这篇文章主要介绍了JavaScript基于面向对象实现的无缝滚动轮播,结合实例形式分析了JavaScript面向对象实现的无缝滚动轮播相关对象定义、初始化及功能实现技巧,需要的朋友可以参考下
    2020-01-01
  • javascript动态添加删除tabs标签的方法

    javascript动态添加删除tabs标签的方法

    这篇文章主要介绍了javascript动态添加删除tabs标签的方法,实例分析了javascript针对tabs标签的动态添加与删除方法,涉及javascript页面元素的操作技巧,需要的朋友可以参考下
    2015-07-07

最新评论