几个月没用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. UML由浅入深

    在UML 2.0的13种图形中,类图是使用频率最高的UML图之一.Martin Fowler在其著作<UML Distilled: A Brief Guide to the Standard O ...

  2. Scala教程之:函数式的Scala

    文章目录 高阶函数 强制转换方法为函数 方法嵌套 多参数列表 样例类 比较 拷贝 模式匹配 密封类 单例对象 伴生对象 正则表达式模式 For表达式 Scala是一门函数式语言,接下来我们会讲一下几个 ...

  3. java基于OpenCV的人脸识别

    基于Java简单的人脸和人眼识别程序 使用这个程序之前必须先安装配置OpenCV详细教程见:https://www.cnblogs.com/prodigal-son/p/12768948.html 注 ...

  4. AbstractQueuedSynchronizer与ReentrantLock

    介绍 j.u.c包中的Lock定义了锁的行为. 而ReentrantLock是并发包下提供的一个锁的实现,它是一个可重入的.排他的锁. ReentrantLock有的属性也很简单,除了一个serial ...

  5. Math.Round和四舍五入

    Math.Round方法并不是像想象中的四舍五入, 可以从下面的输出结果看出来: Math.Round(3.44, 1); //Returns 3.4. Math.Round(3.45, 1); // ...

  6. linux和windows互传文件、用户配置文件和密码配置文件、用户组管理、用户管理...

    linux和windows互传文件 第一种:在linux主机上下载lrzsz软件包 1.yum install lrzsz 2.通过rz命令上传window的文件到linux主机上 用过sz 文件名下 ...

  7. Java 线程池(ThreadPoolExecutor)原理分析与实际运用

    在我们的开发中"池"的概念并不罕见,有数据库连接池.线程池.对象池.常量池等等.下面我们主要针对线程池来一步一步揭开线程池的面纱. 有关java线程技术文章还可以推荐阅读:< ...

  8. 3DMAX导出到Unity坐标轴转换问题

      这是我在3dmax中创建的1cm*1cm*1cm的立方体,右图为3dmax中的坐标系 当我们把这个立方体导入到unity中发现x轴意外的扭转了90度 为了解决这个问题,你需要对模型做出修正 1.选 ...

  9. mock-server 之 mock 接口测试

    1.mock 介绍 mock 除了用在单元测试过程中,还有一个用途,当前端开发在开发页面的时候,需要服务端提供 API 接口,此时服务端没开发完成,或者说没搭建测试环境,这个时候前端开发会自己 moc ...

  10. OSG程序设计之osg::Group

    以下是一个简单的模型读取程序: #include <osgDB/ReadFile> #include <osgViewer/Viewer> #include <osg/N ...