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. OC中修饰符:宏define 常量:const extern

    const const最好理解,修饰的东西不能被修改 指针类型根据位置的不同可以理解成3种情况: I 常量指针 // 初始化之后不能赋值,指向的对象可以是任意对象,对象可变. NSString * c ...

  2. Java 集合深入理解（7）：ArrayList

    点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情有点美丽,学学 ArrayList 放松下吧! 什么是 ArrayList ArrayList 是 Java 集合 ...

  3. Spring Boot交流平台

    可以关注微信公众号springboot或者可以加入 Spring Boot QQ交流群1:193341332 (群已满) Spring Boot QQ交流群2:193341364 微信公众号搜索spr ...

  4. 9、SQL基础整理（两表连接exists,join on,union）

    exists的用法 select *from haha where exists (select *from bumen where bumen.code = haha.bumen and bumen ...

  5. PHP 安全

    作为PHP程序员,特别是新手,对于互联网的险恶总是知道的太少,对于外部的入侵有很多时候是素手无策的,他们根本不知道黑客是如何入侵的.提交入侵.上传漏洞.sql 注入.跨脚本攻击等等.作为最基本的防范你 ...

  6. Ubuntu14.04 64位运行32位程序

    最近公司新增的机器安装Ubuntu14.04 64bit导致之前在32bit下编译的Qt工具软件无法运行. 于是google的了一下找到一些解决办法,但不能保证全部32bit的Qt程序都能正常,测试了 ...

  7. 五 浅谈CPU 并行编程和 GPU 并行编程的区别

    前言 CPU 的并行编程技术,也是高性能计算中的热点,也是今后要努力学习的方向.那么它和 GPU 并行编程有何区别呢? 本文将做出详细的对比,分析各自的特点,为将来深入学习 CPU 并行编程技术打下铺 ...

  8. smartmontools的安装使用和实现对磁盘的Nagios监控

    安装 首先从sourceforge下载最新的安装版本. 解压编译 $ tar -zxvf smartmontools-6.4.tar.gz $ cd smartmontools-6.4 $ ./con ...

  9. Linux下使用fdisk发现磁盘空间和使用mount挂载文件系统

    若在安装Linux系统时没有想好怎么使用服务器,开始时只分了一部分给根目录.后面需要再使用时,可以通过几下一步进行分区和挂载文件系统. 看磁柱数使用情况 fdisk -l Disk /dev/sda: ...

  10. UVa 11729 - Commando War

    [题目翻译]: 题目分析:因为任务是可以并行的执行,所以直觉上是花费时间长的任务优先去部署.但是这到题目还给你交待任务的时间,所以容易让人想多了. 不管有没有交待任务的时间,对于任务x和y,只可能有两 ...