几个月没用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. Python flask 构建可扩展的restful ap

    Flask-RESTful是flask的扩展,增加了对快速构建REST API的支持. Flask-RESTful通过最少的设置鼓励最佳的实践. pip install flask-restfulFl ...

  2. python入门学习之Python爬取最新笔趣阁小说

    Python爬取新笔趣阁小说,并保存到TXT文件中      我写的这篇文章,是利用Python爬取小说编写的程序,这是我学习Python爬虫当中自己独立写的第一个程序,中途也遇到了一些困难,但是最后 ...

  3. 4.K均值算法--应用

    1. 应用K-means算法进行图片压缩 读取一张图片 观察图片文件大小,占内存大小,图片数据结构,线性化 用kmeans对图片像素颜色进行聚类 获取每个像素的颜色类别,每个类别的颜色 压缩图片生成: ...

  4. Python学习16之input函数

    '''''''''Input函数:作用:接受一个标准输入数据返回值:返回为 string 类型使用:input()'''a=input("请输入一个整数")print(a)prin ...

  5. Linux 如何通过 iscsi target name 获取 ip

    by Mike Andrews # lsscsi -t [:::] disk iqn.-.com.blockbridge:t-pjxfzufjkp-illoghjk,t,0x1 /dev/sda [: ...

  6. 《JavaScript 模式》读书笔记(6)— 代码复用模式3

    我们之前聊了聊基本的继承的概念,也聊了很多在JavaScript中模拟类的方法.这篇文章,我们主要来学习一下现代继承的一些方法. 九.原型继承 下面我们开始讨论一种称之为原型继承(prototype ...

  7. Vue Cli 3 报错:router is not defined

    报错内容: 报错原因: 代码全部放在了路由配置的main.js文件里,router没有定义,使用的时候报undefined 解决方法: 把router.beforeEach放在main.js里面

  8. javascript 控制台调试方法

    console在我们调试js程序的时候是一个非常有效的工具. 日志输出是我们最常用的功能: console.log(); console.info(); console.warn(); console ...

  9. Nginx模块开发(2)————下载文件

    Nginx的HTTP模块下载文件和传送缓冲区的字符串差不多,只需将文件标志置为1即可,我转送的文件是mp3的,所以HTTP的那个mine 类型要写为audio/mp3,二话不说了,贴代码,代码和之前那 ...

  10. OSG程序设计之Hello World1.0

    对于从未接触过OSG的我来说,首先需要一个入门教程.在OSG论坛逛了半天,再加上google,最终决定使用<OSG程序设计>这本书. 下面就贴出书中的第一个例子:Hello World. ...