几个月没用webpack都忘了好多了。

webpack构建前端,使用时除了entry/output,就是plugins和module.loaders,还有本地测试的devServer。

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

现在写js流行ES6+,webpack使用babel配置(presets)有三种。presets可以指定转换版本和相关插件、配置。

1.直接在loaders中设置配置。

module:{

  loaders;[

  {  test:/\.js$/,

    loader:'babel-loader',

    include: path.resolve(__dirname,'src'),//解析绝对路径

    exclude: path.resolve(__dirname,'node_modules'),

    query:{preset:'es2015'}},

  ]

//注意:loader关键字后面的-loader后缀现在已不允许省略

2.在根目录下创建.babelrc文件,

{presets:['es2015']}

3.在package.json中添加“babel”属性,

“babel”:{"presets":["es2015"]}

webpack使用babel的更多相关文章

  1. 使用webpack、babel、react、antdesign配置单页面应用开发环境

    这是Webpack+React系列配置过程记录的第一篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  2. webpack中babel配置 --- runtime-transform和babel-pollfill

    webpack - babel配置 babel是一个javascript编译器,是前端开发中的一个利器.它突破了浏览器实现es标准的限制,使我们在开发中可以使用最新的javascript语法. 通过构 ...

  3. (15/24) 为webpack增加babel支持

    Babel是什么? Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译达到以下目的: 使用下一代的javaScript代码(ES6,ES7-.),即使这些标准目前并未被当前 ...

  4. webpack快速入门——给webpack增加babel支持

    1.Babel的安装与配置 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个 你需要的功能或拓展,你都需要安 ...

  5. vue 项目中 自定义 webpack 的 配置文件(webpack.config.babel.js)

    webpack.config.babel.js,这样命名是想让webpack在编译的时候自动识别es6的语法,现在貌似不需要这样命名了,之前用webpack1.x的时候貌似是需要的 let path ...

  6. webpack,Babel,babel-loader的关系

    本文将要介绍 webpack,Babel,babel-loader 的关系.理清楚他们各自做了什么事情. 通常我们新建一个项目,会先配置webpack,然后配置babel:babel是一个编译工具,实 ...

  7. 使用Webpack和Babel来搭建React应用程序

    用Webpack(npm install -g webpack)代码打包,Webpack大致需要知道三件事: 1)让Webpack知道应用程序或js文件的根目录 2)让Webpack知道做何种转换 3 ...

  8. react基于webpack和babel以及es6的项目搭建

    项目demo地址https://github.com/aushion/webpack_reac_config 1.打开命令提示窗口,输入 mkdir react_test cd react_test ...

  9. 关于webpack,babel,以及es6和commonJS之间的联系(转)

    add by zhj: babel是将es6转为es5,而webpack从名字也能看出来,是一个打包工具,根据文件之间的依赖关系,将文件进行打包 原文:https://blog.csdn.net/a2 ...

随机推荐

  1. ES6中对象的扩展

    ES6不仅为字符串.数值和数组带来了扩展,也为对象带来了很多新特性.这一节,我们来一起学习一下对象的扩展. 对象的传统表示法 我们回顾一下,对象的传统表示法: let person = { " ...

  2. 使用openmp进行共享内存编程

    预处理指令pragma:在系统中加入预处理器指令一般是用来允许不是基本c语言规范部分的行为.不支持pragma的编译器会忽略pragma指令提示的那些语句,这样就允许使用pragma的程序在不支持它们 ...

  3. elementaryos5安装mysql5.7、php7.2、nginx1.14.0

    一.mysql5.7 安装mysql5.7: sudo apt-get install mysql-server-5.7 查看安装的mysql版本: mysql -V 5.7版本mysql安装过程中以 ...

  4. cdn服务器

    CDN的基本原理和基础架构 CDN是将源站内容分发至最接近用户的节点,使用户可就近取得所需内容,提高用户访问的响应速度和成功率.解决因分布.带宽.服务器性能带来的访问延迟问题,适用于站点加速.点播.直 ...

  5. zabbix 微信告警机制

    微信告警首先得注册一个企业微信,然后才能实现微信告警.自行百度 微信: 添加一个用户到上面创建的部门里面 创建完成记住 AgentID  和 Secret 下一步:记住企业 ID 1)编辑zabbix ...

  6. js 之 object

    js之object 对象 ECMA-262 把对象(object)定义为“属性的无序集合,每个属性存放一个原始值.对象或函数”.严格来说,这意味着对象是无特定顺序的值的数组. 尽管 ECMAScrip ...

  7. 【Linux常见命令】alias命令

    alias命令用于查看和设置指令的别名. 用户可利用alias,自定指令的别名. 若仅输入alias,则可列出目前所有的别名设置. alias的效力仅及于该次登入的操作.若要每次登入是即自动设好别名, ...

  8. qemu-img 整理

    qemu-img命令语法: qemu-img command [command options] check命令: check [-f fmt < qcow2 | qed | vdi >] ...

  9. MYSQL 排序和分组

    一.MYSQL 中有两种排序方式: 1:通过有序索引顺序扫描直接返回有序数据,这种方式在使用explain 分析查询的时候显示为Using Index ,不需要额外的排序,操作效率较高. 2: 是通过 ...

  10. 前端——localStorage详细总结

    一.localStorage简介: 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cooki ...