使用babel来编译es6的语法;

1、在终端上输入指令

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

2、在webpack.config.js里配置:

{test: /\.js$/, loader: 'babel'}

3、在.babelrc里配置:

 {
"presets": [
"es2015",
"react",
"stage-2"
],
"presets": ["es2015"]
}

4、运行webpack指令

表示成功。

index.js 里的代码如下:

要引入的text.js里的代码如下:

控制台输出如下:

webpack 配置es6 语法的更多相关文章

  1. webpack配置ES6 + react套装开发

    配置ES6 1.安装插件: babel-loader,babel-preset-es2015,babel-preset-react. 2.添加配置文件中部分内容: { test: /\.js$/, l ...

  2. webpack配置es6开发环境

    webpack.config.js var path = require('path'); module.exports = { entry: "./es6/demo01.js", ...

  3. [webpack] 配置react+es6开发环境

    写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...

  4. webpack打包不识别es6语法的坑

    今天Vue项目npm run build 后webpack,报错uglifyjs,自己研究了一下,翻译过来,意思是不识别项目中写的高级语法,这里要把项目里es6语法转es5让浏览器识别, 也就是web ...

  5. webpack中使用babel处理es6语法

    index.js const arr = [ new Promise(()=>{}), new Promise(()=>{}) ]; arr.map(item => { consol ...

  6. Webpack+React+ES6 最新环境搭建和配置(2017年)

    刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...

  7. 使用webpack+babel构建ES6语法运行环境

    1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...

  8. webpack4 使用babel处理ES6语法的一些简单配置

    一,安装包 npm install --save-dev babel-loader @babel/corenpm install @babel/preset-env --save-devnpm ins ...

  9. Webpack 4.x 默认支持 ES6 语法

    Webpack 4.x 默认支持 ES6 语法 Q: 为什么 webpack4 默认支持 ES6 语法的压缩? A: terser 里面实现了 ES6 语法的 AST解析. webpack 4 里使用 ...

随机推荐

  1. POJ-1639 Picnic Planning 度数限制最小生成树

    解法参考的论文:https://wenku.baidu.com/view/8abefb175f0e7cd1842536aa.html 觉得网上的代码好像都是用邻接矩阵来实现的,觉得可能数据量大了会比较 ...

  2. 前端学习(七)less(笔记)

    less---处理器:koala_2.0.4_portable 属于css预处理语言,可以让你的css语言更有逻辑性! 编译css的! 准备工作:    1.项目:        js         ...

  3. Copying Books

    Copying Books 给出一个长度为m的序列\(\{a_i\}\),将其划分成k个区间,求区间和的最大值的最小值对应的方案,多种方案,则按从左到右的区间长度尽可能小(也就是从左到右区间长度构成的 ...

  4. java输入一个整数N,打印1~n位数

    举个栗子:输入 3 : 打印1,2,3......999 这里要注意一个坑,不可以直接算出最大的数,然后从1开始打印 .因为当n足够大时,n位数必定会超出int范围和long范围 所以我们需要用字符串 ...

  5. 【leetcode】133. Clone Graph

    题目如下: Given the head of a graph, return a deep copy (clone) of the graph. Each node in the graph con ...

  6. 设计不严谨 - Get参数传日期空格未转义字符出现截断请求,后端无法处理

    设计不严谨 Get参数传递日期的时候有空格,如果未转义的话,会截断请求,然后后端无法处理. 从业务场景看 从产品的角度看,产品想要看每个活动的效果,而不是想知道技术. 角度不同,视觉不同 mark

  7. 微信中location.reload失效

    var len = window.location.href.indexOf("?"); if(len>0){     window.location.href=window ...

  8. 力扣算法题—150. Evaluate Reverse Polish Notation

      Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +,  ...

  9. Netty 源码学习——EventLoop

    Netty 源码学习--EventLoop 在前面 Netty 源码学习--客户端流程分析中我们已经知道了一个 EventLoop 大概的流程,这一章我们来详细的看一看. NioEventLoopGr ...

  10. 【NodeJS】Error: Cannot find module 'ms'

    报错原因: Error: Cannot find module 'ms' at Function.Module._resolveFilename (module.js::) at Function.M ...