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. javaweb-dbcp2

    package cn.itcast.utils; import java.io.InputStream;import java.sql.Connection;import java.sql.Drive ...

  2. BZOJ 1968 约数研究

    其实打个表就会发现,这个玩意儿是积性的,然后很happy的搞了一下. 不,不是这样. 考虑每个约数对答案的贡献,不难发现:约数i的贡献为n/i. 加之即可. #include<iostream& ...

  3. Python行和缩进

    Python缩进和冒号 对于Python而言代码缩进是一种语法,Python没有像其他语言一样采用{}或者begin...end分隔代码块,而是采用代码缩进和冒号来区分代码之间的层次. 缩进的空白数量 ...

  4. C# Rhino Mocks

    Mock和Stub的区别: 1,Stub是一个在你的测试代码中需要用到的object,你可以为它设置expectations,然后它就会按其运行,但是这些expectations不会被核对. 2,Mo ...

  5. 初始React Native

    1.何是React Native: React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开 ...

  6. iOS打包为ipa的两种方式和生成P12证书的方式

    iOS项目打包为ipa的两种方式: 准备工作:先行在Xcode里面打开preferences,填写apple id. 通过iTunes+Xcode 在Xcode里,把模拟器调整为iOS Device, ...

  7. java作业4

    (一)  请查看String.equals()方法的实现代码,注意学习其实现方法.(发表到博客作业上) (二)  整理String类的Length().charAt(). getChars().rep ...

  8. nno_setup制作升级包必须面临的几个问题 2

    这两天的时间一直在制作应用程序的升级包,期间碰到一些问题这里一并记录下来,相信这是制作升级包必须面临和解决的问题: 1. 升级包安装程序如何不再产生新的安装.卸载程序 Inno_setup中AppId ...

  9. 整合Open vSwitch与DNSmasq为虚拟机提供DHCP功能

    继上文<Ubuntu14.04安装配置Open vSwitch>安装好Open vSwitch后,这里我们将要创建两个KVM虚拟机,并通过DNSmasq来为这两个虚拟机自动分配私网IP地址 ...

  10. JS开发者常用的10个Sublime Text插件

    Sublime Text 是每个开发者工具箱中都应该有的一个强大的应用.它是一个跨平台的.高定制化的.高级的文本编辑器,在功能强大的 集成开发环境(众所周知地消耗资源)和类似于 Vim 或 Emacs ...