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移动listbox的值原理及代码
May 03 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
Ajax常用封装库——Axios的使用
May 08 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+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
js编写简单的聊天室功能
2017/08/17 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
如何运行Python程序的方法
2013/04/21 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python类的继承和多态代码详解
2017/12/27 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python3.4解释器用法简单示例
2019/03/22 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
完美的中文自荐信
2014/05/24 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
作风建设整改方案
2014/10/27 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技