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. Detail in Response.redirect and Server.transfer in ASP.NET

    http://www.developerfusion.com/article/4643/implementing-http-handlers-in-aspnet/4/

  2. Maven Build profiles

    They modify the POM at build time, and are meant to be used in complementary sets to give equivalent ...

  3. IOS 作业项目(4)步步完成 画图 程序(中)

    一,承接上文,继续本文  [UIButton buttonWithType:UIButtonTypeRoundedRect]; 如此声明的按钮才会有点击闪动的效果!如果直接frame方式声明就不会有. ...

  4. [数据结构]KMP小结

    KMP小结   By Wine93 2013.9 1.学习链接: http://www.matrix67.com/blog/archives/115 2.个人小结 1.KMP在字符串中匹配中起着巨大作 ...

  5. 【OpenGL】法线变换详解（Normal Transform）[转]

    http://blog.csdn.net/xiajun07061225/article/details/7762711 在图形学中,同样的一个模型视图变换矩阵可以用来变换点.线.多边形以及其它几何体, ...

  6. PHP startsWith and endsWith

    function startsWith($haystack, $needle) { // search backwards starting from haystack length characte ...

  7. HDU 1003 Max Sum（AC代码）

    #include <stdio.h> int main(){ int i,t,j,n,x; int start,end,temp,max,sum; scanf("%d" ...

  8. fn

    var avalon = function (el) { return new avalon.init(el) } avalon.init = function (el) { this[0] = th ...

  9. druid 源码分析与学习(含详细监控设计思路的彩蛋)(转)

    原文路径:http://herman-liu76.iteye.com/blog/2308563  Druid是阿里巴巴公司的数据库连接池工具,昨天突然想学习一下阿里的druid源码,于是下载下来分析了 ...

  10. TC HTB r2q

    HTB: quantum of class 10001 is big. Consider r2q change. 根据HTB的官方文档显示,quantum是在可以“借”的情况下,一次可以“借”多少,并 ...