1. Install Babel and the presets:

     npm install --save-dev babel-core babel-preset-es2015

  2. Install babel-loader:

     npm install --save-dev babel-loader

  3. Configure Babel to use these presets by adding .babelrc

     { "presets": [ "es2015" ] }

  4. Modify webpack.config.js to process all .js files using babel-loader.

     module.exports = {
    
     entry: './src/app.js',
    
     output: {
    
         path: './bin',
    
         filename: 'app.bundle.js',
    
     },
    
     module: {
    
         loaders: [{
    
             test: /\.js$/,
    
             exclude: /node_modules/,
    
             loader: 'babel-loader',
    
         }]
    
     }
    
 }

    We are excluding node_modules here because otherwise all external libraries will also go through Babel, slowing down compilation.

  5. Install the libraries you want to use (in this example, jQuery):

     npm install --save jquery babel-polyfill

    We are using --save instead of --save-dev this time, as these libraries will be used in runtime. We also usebabel-polyfill so that ES2015 APIs are available in older browsers.

  6. Edit src/app.js:

     import 'babel-polyfill';
    
 import cats from './cats';
    
 import $ from 'jquery';

 $('<h1>Cats</h1>').appendTo('body');
    
 const ul = $('<ul></ul>').appendTo('body');
    
 for (const cat of cats) {
    
     $('<li></li>').text(cat).appendTo(ul);
    
 }

  7. Bundle the modules using webpack:

     webpack

  8. Add index.html so this app can be run:

     <!DOCTYPE html><body>
    
 <script src="bin/app.bundle.js"></script>

webpack es6支持配置的更多相关文章

  1. 配置react+webpack+es6中的一些教训

    1.要用es6,因为目前浏览器的支持情况,那么肯定需要插件将e6的代码转换成es5,我用的是babel-loader,事实证明使用6.x版本似乎是不行的,我换成5.3.2之后就成功了. 2.webpa ...

  2. webpack window下配置的hello world

    峰回路转 一区九折 先看效果:(此效果是webpack执行完之后会生成build文件夹已经它下面的index.html,点击index.html就是下图的效果)

  3. Webpack的详细配置，[Webpack中各种loader的安装配置]

    在使用webpack的时候,你是不是被以下这种报错所困扰: 注意看 黄色框中标注的 You may need an appropriate loader to handle this file typ ...

  4. React+Webpack+ES6环境搭建(自定义框架)

    引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...

  5. sublime,webstrom,vscode的使用感受,以及对于vue和webpack的支持,还有一些快捷键使用心得

    从最开始用sublime3到webstrom再到vscode,我的感觉如下: sublime首次加载项目文件速度较快,每次装插件有点麻烦,插件很丰富,也很好用. webstrom首次加载项目文件速度奇 ...

  6. 深入浅出 webpack 之基础配置篇

    前言 前端工程化经历过很多优秀的工具,例如 Grunt.Gulp.webpack.rollup 等等,每种工具都有自己适用的场景,而现今应用最为广泛的当属 webpack 打包了,因此学习好 webp ...

  7. Webpack的基本配置和打包与介绍

    1. 前言 1.1 Webpack是什么 可能有很多的小伙伴对于这个Webpack既熟悉又陌生,有一些刚开始接触vue的小伙伴在对项目进行打包的时候经常会使用到npm run build来进行打包,但 ...

  8. webpack + vuejs 基本配置（一）

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  9. webpack的简单配置

    本人刚开始也不会写webpack配置,刚开始在网上搜索了了一些,看的也是刚刚理解,所以准备自己写下来,已作纪念和贡献给像我一样不会配置的“童鞋”们! 1.创建webpack配置文件 在项目文件下创建一 ...

随机推荐

  1. iOS字体设置

    label.font = [UIFont fontWithName:@"Arial-BoldItalicMT" size:24]; 字体名如下: Font Family: Amer ...

  2. swift初识

    介绍: Swift是苹果2014年推出的全新编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程不仅保留了Objc很多语言特性,他也借鉴了多种现代化语言的特点,在其 ...

  3. 禁止VMware用户在系统里删除网卡的操作的方法

    点击选项-常规-配置参数,如下图所示:   8)点击“添加行”,在新的栏目中,左栏输入:devices.hotplug,右边栏输入:false

  4. Fix a corrupted user profile

    Fix a corrupted user profile Applies to Windows 7 Your user profile is a collection of settings that ...

  5. Supermarket_贪心

    Description A supermarket has a set Prod of products on sale. It earns a profit px for each product ...

  6. HDU 1622

    http://acm.hdu.edu.cn/showproblem.php?pid=1622 白书上6.3.2二叉树层次遍历的例题,层次遍历用bfs,建立二叉树,很基础的题目 #include < ...

  7. 【转】DOM事件简介

    原文转自:http://blog.jobbole.com/52430/ Click.touch.load.drag.change.input.error.risize — 这些都是冗长的DOM(文档对 ...

  8. 第一个Sprint冲刺第五天

    讨论成员:邵家文.李新.朱浩龙.陈俊金 讨论问题:掌握计时技术的知识 讨论地点:qq网络 进展:完成对功能的理解

  9. 转：设置session过期时间

    在Asp.net应用中,很多人会遇到Session过期设置有冲突.其中,可以有四处设置Session的过期时间: 一.全局网站(即服务器)级 IIS-网站-属性-Asp.net-编辑配置-状态管理-会 ...

  10. NSData和NSString 、 NSFileManager

    1 NSData和NSMutableData的基本使用 1.1 问题 NSData类是IOS提供的用于以二进制的形式操作文件数据的类,NSData有两个常用的属性length和bytes,length ...