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- ...
随机推荐
- CANO入门(三)
最好的学习方式是什么?模仿.有人会问,那不是山寨么?但是我认为,那是模仿的初级阶段,当把别人最好的设计已经融化到自己的血液里,变成自己的东西,而灵活运用的时候,才是真正高级阶段.正所谓画虎画皮难画骨. ...
- md5 加解密
using JGDJWeb.Model; using System; using System.Collections.Generic; using System.IO; using System.L ...
- c# 防止重复运行 弹出已运行窗口并传递消息
最近在写一款软件 软件是用来接收其他程序传递过来的命令行,并形成列表 大概的最终效果就像下图一样 原本为了程序美观是打算用listbox自绘列表,字和图片都绘制好了发现自己不会绘制按钮 所以最终采用了 ...
- 有关时间限制使用和软件注册的设计(delphi)
http://blog.sina.com.cn/s/blog_693cf1cf0100oyus.html procedure TForm1.form1create(Sender: TObject);v ...
- 如何让IE7,IE8支持css3
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 原理:在用ie浏览 ...
- codeforces-103B
题目连接:http://codeforces.com/contest/103/problem/B B. Cthulhu time limit per test 2 seconds memory lim ...
- #420 Div2 C
#420 Div2 C 题意 不断把数加入到一个栈里,取数的时候要求按照 1~n 的顺序取数,每次取数保证数一定在栈里,如果要取的数不在栈头,可以选择对栈排序一次.问最少排序几次. 分析 只要栈头的数 ...
- How to not display “Commit point reached - logical record count” counts
You can use the keyword silent, which is available in the options clause. You can set the followin ...
- Spring 依赖注入(控制反转)介绍
耦合性是软件工程中的一个重要概念.对象之间的耦合性就是对象之间的依赖性.对象之间的耦合越高,维护成本越高.因此对象的设计应使类和构件之间的耦合最小. spring Ioc思想 控制翻转也就是sprin ...
- 【bzoj1226】【[SDOI2009]学校食堂Dining】状压dp
(上不了p站我要死了,侵权度娘背锅) Description 小F 的学校在城市的一个偏僻角落,所有学生都只好在学校吃饭.学校有一个食堂,虽然简陋,但食堂大厨总能做出让同学们满意的菜肴.当然,不同的人 ...