es6 webpack转es5
更新时间:
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的更多相关文章
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- es6开发环境搭建,babel 将es6转化成es5
工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...
- ES6+Webpack 下使用 Web Worker
大家都知道 HTML 5 新增了很多 API,其中就包括 Web Worker,在普通的 js 文件上使用 ES5 编写相关代码应该是完全没有问题了,只需要在支持 H5 的浏览器上就能跑起来. 那如果 ...
- 用vue2 +vue-router2 + es6 +webpack 高仿饿了么app(干货满满)
#高仿饿了么app商家详情 (vue2 +vue-router2 + es6 +webpack ) ##demo [demo 地址](http://liangxiaojuan.github.io/ ...
- reactjs学习一(环境搭配react+es6+webpack热部署)
reactjs学习一(环境搭配react+es6+webpack热部署) 本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study 或者使 ...
- ES6学习(1)——如何通过babel将ES6转化成ES5
使用babel编译ES6 babel是一个工具,可以通过多个平台,让js文件从ES6转化成ES5,从而支持一些浏览器并未支持的语法. Insall babel $ sudo npm install b ...
- 使用babel将ES6编译成ES5
现在ES6已经非常成熟了,我的需求很明确,就是只需要将ES6编译成ES5. 项目目录为 借鉴的博客链接为https://blog.csdn.net/suwu150/article/details/77 ...
- ES6 Set vs ES5 Array
ES6 Set vs ES5 Array Set https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Ob ...
- 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- ...
随机推荐
- 51Nod 1558 树中的配对
题目链接 分析: 想了好久~~~还是得看题解...QwQ 首先因为是排列,所以我们猜想要把式子拆开来看, $ \sum dis(i,p[i])=\sum dep[i]+dep[p[i]]-2*dep[ ...
- [bzoj2301][HAOI2011]Problem B —— 莫比乌斯反演+容斥原理
题意 给定a, b, c, d, k,求出: \[\sum_{i=a}^b\sum_{j=c}^d[gcd(i, j) = k]\] 题解 为方便表述,我们设 \[calc(\alpha, \beta ...
- 开源免费的C/C++网络库(c/c++ sockets library)(转)
原文转自 http://blog.csdn.net/weiwangchao_/article/details/8730199 (1)ACE 庞大.复杂,适合大型项目.开源.免费,不依赖第三方库,支持跨 ...
- Linux内核驱动之延时---内核超时处理【转】
转自:http://blog.chinaunix.net/uid-24219701-id-3288103.html 内核超时处理 jiffies 计数器 定时器中断由系统定时硬件以规律地间隔产生; 这 ...
- WPF+MVVM数据绑定问题集锦
1. 数据绑定的问题 在使用数据绑定时,一般使用 ObservableCollection<T> 类,不使用list列表集合,因为list数据发生变化时,UI界面不更新,而Observa ...
- #422 Div2 D
#422 Div2 D 题意 假设有 n 个人比赛,每次比赛进行分组,每组人数必须相同,如果一组有 x 人,则那一组要比赛 $ \frac{x * (x - 1)}{2}$次,最终一人获胜,其它人淘汰 ...
- Java-静态代码块,构造代码块,构造函数
静态代码块:用staitc声明,jvm加载类时执行,仅执行一次 构造代码块:类中直接用{}定义,每一次创建对象时执行. 执行顺序优先级:静态块, main(),函数,构造块,构造方法. 构造函数 pu ...
- [BZOJ 1412] 狼与羊的故事
Link: BZOJ 1412 传送门 Solution: 非常明显的最小割模型: 将所有点分成两个互不相邻的点集,且要求代价最小 建图: $<S,sheep,INF>$ $<wol ...
- Oracle PL/SQL入门之慨述
Oracle PL/SQL入门之慨述 一.PL/SQL出现的目的 结构化查询语言(Structured Query Language,简称SQL)是用来访问关系型数据库一种通用语言,它属于第四代语言( ...
- 归档 & 解档
代码实现 遵守协议 class AccessToken: NSObject, NSCoding 实现协议方法 // MARK: - 归档&解档 required init(coder aDec ...