使用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. win10配置jdk环境变量及遇到的坑

    第一步.在系统变量中新增变量命名JAVA_HOME,值为jdk的安装目录 JAVA_HOME C:\Program Files\Java\jdk1.8.0_231 第二步.在系统变量中增加path的值 ...

  2. Dubbo---zookeeper 注册中心---xml配置

    1.项目结构(maven项目) 2.pom <?xml version="1.0" encoding="UTF-8"?> <project x ...

  3. Restrictions----用法

    ----------------------------------------方法说明 --------------------------QBC常用限定方法-------------------- ...

  4. cmake build

    { //cmake CMakeLists.txt -G "Visual Studio 15 2017" }

  5. magento结构解析

    Magento 模块 模块( module )是 Magento 的核心.站点上的任何一个动作( action ),无论是在前台和还是在后台的每一个操作都是通过模块来实现的.模块是可以视为一个容器,它 ...

  6. ajax验证用户名是否存在,手机号是不是匹配

    <label class="col-sm-2 control-label font">用户名</label> <div class="col ...

  7. javascript基础总结之实例(二)

    div的显示和隐藏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  8. Yii2中的规则

    //Yii2中的规则,用户名的规则,1.用户名只能是字母 2.判断用户名已经存在 3.用户名的长度 4.用户名不能为空 [['username'], 'match', 'pattern' => ...

  9. this关键字的使用!

    class Student{ String name; int age; Student(String name,int age){ this.name=name; this.age=age; } S ...

  10. Zend Studio出现 Some characters cannot be mapped using "GBK" character encoding 错误

    解决办法: Window->Profermance->General->Content Types->Text看目录下面的每个文件,包括子目录里面 Default encodi ...