详解webpack 配合babel 将es6转成es5 超简单实例

时间：2017.05.19 发布人：gch3303
详解webpack 配合babel 将es6转成es5 超简单实例

已解决问题

谷歌gch3303用户在2017.05.19提交了关于“非常人贩详解webpack 配合babel 将es6转成es5 超简单实例”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-02-25T20:18:25。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，真心佩服你,谢谢 ！

希望以下的回答，能够帮助你。

第1个回答

用户名：g151441739  

今天接触了webpack，第一次使用webpack进行转码，竟然稀里糊涂就成功了，哈哈。

下面附上流程

创建个文件夹，初始化一下，首先全局安装webpack

npminstallwebpack--s**e-dev

然后安装babel

npminstall--s**e-devbabel-corebabel-preset-es2015npminstall--s**e-devbabel-loader

在当前文件夹内执行安装，然后创建两个文件夹一个src作为源文件夹，一个bin，保存生成的文件夹的列表

在src文件夹内创建一个文件app.js，里面写入现在浏览器不全支持的es6代码

leta=111;letb=222;varxxx=(c,d)=>c*d;console.log(xxx(a,b));

然后在根目录创建一个文件名为webpack.config.js

mo**le.exports={entry:'./src/app.js',output:{path:'./bin',filename:'app.bundle.js',},mo**le:{loaders:[{test:/\.js$/,exclude:/node_mo**les/,loader:'babel-loader'}]}}

然后再创建一个用于babel调用的文件，名为.babelrc

里面写入

{"presets":["es2015"]}

然后在当前目录打开cmd，

运行命令webpack

如果出现绿色的，明成功了

然后去bin目录里面找到app.bundle.js发现里面下面会有这段代码

function(mo**le,exports){"usestrict";vara=111;varb=222;varxxx=functionxxx(c,d){returnc*d;};console.log(xxx(a,b));

明转码成功~~~~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。