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. Python的文件类型

    Python的文件类型主要分为3种:源代码(source file).字节码(byte-code file).优化的字节码(optimized file).这些代码都可以直接运行,不需要编译或者连接. ...

  2. Eclipse的maven构建一个web项目，以构建SpringMVC项目为例

    http://www.cnblogs.com/javaTest/archive/2012/04/28/2589574.html springmvc demo实例教程源代码下载:http://zuida ...

  3. XML JSON解析--基本功能

    一,json的解析 json文件: {"code": "cn","cities":   [{"name": " ...

  4. 前端学习资源（js）

    JavaScript JavaScript | MDN JavaScript 秘密花园 JavaScript 标准参考教程(alpha) 给 JavaScript 初心者的 ES2015 实战 Col ...

  5. dos快速通道

    要在文件夹的右键菜单中添加“命令提示符”选项.在注册表HKEY_CLASSES_ROOT\Directory\shell分支下新建一项“CommandPrompt”,修改右侧窗格中的“默认”键值为“命 ...

  6. 消格子时一个很深的bug的修复纪录

    环境: cocos2d-x 2.2.2  jsb   条件:当快速在格子中来回拖拽选取时,会一直在计算指尖和格子的真实区域是否碰撞,   报错:touchMOve时由于不停的调用BOxItem的get ...

  7. IAP沙盒测试帐号无法购买的问题

    1,创建一个美国的iap测试帐号 2,啪的一声从哪个地方拔出你的ios设备,设置 -> Itunes Store和 App Store -> 点击Apple ID ->注销 3,运行 ...

  8. log4j常见问题

    1.日志文件不能生成日期后缀 需求:想要生成的文件是以日期格式为后缀或者结尾的. 设置: log4j.appender.appenderName.DatePattern='.'yyyy-MM-dd 也 ...

  9. LCS (nlogn)

    最长上升子序列的O(n*logn)算法分析如下: 先回顾经典的O(n^2)的动态规划算法,设a[t]表示序列中的第t个数,dp[t]表示从1到t这一段中以t结尾的最长上升子序列的长度,初始时设dp [ ...

  10. 83. Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. For examp ...