更新时间:

2018-7-31 首次更新.

先生成package.json

npm init -y

再安装以下npm插件

 npm i babel-core babel-loader babel-preset-es2015 webpack -D && npm i -g webpack-cli

看起来应该是这样的(除版本号外),详细的配置文件不细说

webpack.config.js

 const path = require('path');
module.exports = {
// 入口
// 一旦package.json里面配置了webpack --mode=production,下面的mode:'production'就不必了
// mode:'production',
entry:path.resolve(__dirname,'app.js'),
output: {
// 出口重命名js
filename: 'bundle.js',
// 出口文件夹名
path:path.resolve(__dirname,'build'),
},
module:{
rules:[
{
test:/(\.jsx|\.js)$/,
use:{
loader:"babel-loader",
options:{
presets:[
"env"
]
}
},
exclude:path.resolve(__dirname,"node_modules"),
include:path.resolve(__dirname,"src")
}
]
}
}

入口文件为app.js,你可以随意写路径或者更改js.

运行命令:npm run start


正确的运行代码应该是这样的(无报错,无警告),不过最开始运行时产生了一条警告(https://webpack.js.org/concepts/mode/

es6 webpack转es5的更多相关文章

  1. 一个基于ES6+webpack的vue小demo

    上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...

  2. es6开发环境搭建,babel 将es6转化成es5

    工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...

  3. ES6+Webpack 下使用 Web Worker

    大家都知道 HTML 5 新增了很多 API,其中就包括 Web Worker,在普通的 js 文件上使用 ES5 编写相关代码应该是完全没有问题了,只需要在支持 H5 的浏览器上就能跑起来. 那如果 ...

  4. 用vue2 +vue-router2 + es6 +webpack 高仿饿了么app(干货满满)

    #高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack )   ##demo [demo 地址](http://liangxiaojuan.github.io/ ...

  5. reactjs学习一(环境搭配react+es6+webpack热部署)

    reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study   或者使 ...

  6. ES6学习(1)——如何通过babel将ES6转化成ES5

    使用babel编译ES6 babel是一个工具,可以通过多个平台,让js文件从ES6转化成ES5,从而支持一些浏览器并未支持的语法. Insall babel $ sudo npm install b ...

  7. 使用babel将ES6编译成ES5

    现在ES6已经非常成熟了,我的需求很明确,就是只需要将ES6编译成ES5. 项目目录为 借鉴的博客链接为https://blog.csdn.net/suwu150/article/details/77 ...

  8. ES6 Set vs ES5 Array

    ES6 Set vs ES5 Array Set https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Ob ...

  9. ES6 Class vs ES5 constructor function All In One

    ES6 Class vs ES5 constructor function All In One ES6 类 vs ES5 构造函数 https://developer.mozilla.org/en- ...

随机推荐

  1. eclipse搭建ssm框架的maven的工程

    版本:eclipse:Indigo Service Release 2.  jdk :jdk1.7.0_03. maven:apache-maven-3.3.3 . 上面的3个东西 先下载下来.然后运 ...

  2. codechef AUG17 T2 Chef and Mover

    Chef and Mover Problem Code: CHEFMOVR Chef's dog Snuffles has so many things to play with! This time ...

  3. Oracle中DBMS_LOB包使用小结

    本文主要介绍oracle数据库中dbms_lob包的使用以及使用dbms_lob包来维护lob数据库类型的基本方法.随着社会的发展,在现代信息系统的开发中,需要存储的已不仅仅是简单的文字信息,同时还包 ...

  4. 动态加载.so文件并执行类函数

    背景:不同产品组将其功能编译为.so,这些.so 可以加载到统一的基础平台上运行,如果产品组代码有改动,只需要更新对应的.so 问题:如何动态加载.so文件,并使用里边的函数/类 ? 解决方法1: 使 ...

  5. 华为上机测试题(水仙花数升级版-java)

    PS:这题满分100,没有做对,大家帮忙看看问题在哪 /* * 题目:水仙花数升级版  * 描述: 水仙花数是指一个 n 位数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身.(例如:1 ...

  6. oracle 批量改temp/data/redo file的路径

    批量生成修改路径的脚本.select 'alter database rename file ''' || name ||'''' || ' to '''|| substr(name,0,instr( ...

  7. ros move_base costmap 理解和实现动态窗口法避障

    以下大部分内容参考自 ros_by_example_hydro_volume_1.pdf local costmap 是怎么生成的?跟三维点云有什么关系? global costmap在没有全局地图下 ...

  8. Delphi实现截屏存盘的方法

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  9. AC日记——Little Elephant and Shifts codeforces 221e

    E - Little Elephant and Shifts 思路: 一次函数线段树(疯狂debug): b不断循环左移,判断每次最小的|i-j|,a[i]=b[j]: 仔细观察发现,每个bi移动时, ...

  10. POJ 2184 Cow Exhibition【01背包+负数(经典)】

    POJ-2184 [题意]: 有n头牛,每头牛有自己的聪明值和幽默值,选出几头牛使得选出牛的聪明值总和大于0.幽默值总和大于0,求聪明值和幽默值总和相加最大为多少. [分析]:变种的01背包,可以把幽 ...