查询各个 loader的使用,可以在官网上查询。

  https://www.npmjs.com

(一)安装 babel-loader,babel-core。

    使用命令

npm install --save-dev babel-loader babel-core

    因为ES6语法每年都在更新,因此,我们需要一定的规则去转换。

npm install --save-dev babel-preset-latest

(二)

  首先按照如下层级建立相应文件

  

    将测试用的ES6代码放在 app.js,使用CMD语法,将layer嵌入对象layer中。app.js代码如下。

import layer from './components/layer/layer.js';

const App = function () {
console.log(layer);
} new App();

    layer.js代码如下

function layer(){
return{
name:'layer',
tpl:'testTpl'
};
} export default layer;

(三)webpack.config.js代码如下

var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
console.log(__dirname);
module.exports = {
/*context: __dirname,*/
entry: './src/app.js', output: {
path: './dist',
filename: 'js/[name]-bound.js'//生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js,main-2ea5b2e9b258a8bbba73.js
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
/*exclude: path.resolve(__dirname, 'node_modules'), //编译时,不需要编译哪些文件*/
/*include: path.resolve(__dirname, 'src'),//在config中查看 编译时,需要包含哪些文件*/
query: {
presets: ['latest'] //按照最新的ES6语法规则去转换
}
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', //通过模板生成的文件名
template: 'index.html',//模板路径
inject: 'body' //是否自动在模板文件添加 自动生成的js文件链接 })
]
};

webpack(三)使用 babel-loader 转换 ES6代码的更多相关文章

  1. webpack4与babel配合使es6代码可运行于低版本浏览器

    使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel7转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const ...

  2. webstrom如何配置babel来转换es6

    网上有很多关于如何设置babel的.我学习着设置,但总差那么几步,没能满足我的需求. 我使用的是webStorm2017.1版本. babel安装准备 使用webStorm自带的filewatcher ...

  3. 使用babel编译器将es6代码转为es5的方法

    1.首先需要安装工具 babel-cli =========  npm i babel-cli -g   install 可以使用i 代替 2.安装插件   npm i --save-dev babe ...

  4. 深入浅出的webpack构建工具---babel之配置文件.babelrc(三)

    阅读目录 一:理解 babel之配置文件.babelrc 基本配置项 二:在webpack中配置babel 回到顶部 一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel ...

  5. 关于webpack,babel,以及es6和commonJS之间的联系(转)

    add by zhj: babel是将es6转为es5,而webpack从名字也能看出来,是一个打包工具,根据文件之间的依赖关系,将文件进行打包 原文:https://blog.csdn.net/a2 ...

  6. 深入理解webpack(三) babel之配置文件

    一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写 ...

  7. 利用babel工具将es6语法转换成es5,Object.assign方法报错

    一.新建工程初始化项目 1.新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src .dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录) ...

  8. 使用babel把es6代码转成es5代码

    第一步:创建一个web项目 使用命令:npm init 这个命令的目的是生成package.json. 执行第二步中的命令后生成的package.json的文件的内容是: { "name&q ...

  9. Babel下的ES6兼容性与规范

    前端开发 Babel下的ES6兼容性与规范   ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...

随机推荐

  1. 设计模式入门——Head First

    设计模式是被前人发现.经过总结形成了一套某一类问题的一般性解决方案.使用模式最好的方式是:把模式装进脑子,然后在设计和已有的应用中,寻找何处可以使用它们.以往是代码复用,现在是经验复用. 从模拟鸭子游 ...

  2. Java IO流学习总结六:ByteArrayInputStream、ByteArrayOutputStream

    类的继承关系 InputStream |__ ByteArrayInputStream OutputStream |__ ByteArrayOutputStream ByteArrayInputStr ...

  3. svg-edit和svg中的自定义属性

    用svg的码农们肯定知道,在path.rect等元数据中会加入一些自定义属性,保存于数据库,但是用svg-edit编辑器时, 读取的时候,无法读取些这些自定义属性.解决办法:找sanitize.js文 ...

  4. MySQL 各种主流 SQLServer 迁移到 MySQL 工具对比

    原地址:https://www.cnblogs.com/overblue/p/5796887.html Mss2sql:这个比较好用

  5. 2018面向对象程序设计(Java) 第2周学习指导及要求

    2018面向对象程序设计(Java) 第2周学习指导及要求(2018.9.3-2018.9.9)   学习目标 适应老师教学方式,能按照自主学习要求完成本周理论知识学习: 掌握Java Applica ...

  6. ABAP IMPORT&EXPORT的用法

    1含有事务码 1.1 不注入参数,直接调用 CALL TRANSACTION 'SUIM' AND SKIP FIRST SCREEN. 1.2 注入参数, SET PARAMETER ID: '屏幕 ...

  7. 目前为止最全的微信小程序项目实例

    https://blog.csdn.net/zuoliangzhu/article/details/53862576#t1

  8. spring boot 代理(not eligible for auto-proxying)

    spring 事务机制网上的案例很多,关于事务 不能回滚也有很多的类型,不同的问题有不同的处理方案,本篇博客主要介绍两种事务不能回滚的问题解决方案: 问题一:    在同一个对象中有两个方法,分别未方 ...

  9. Java中字节流如何转字符流,OutputStreamWriter用法

    OutputStreamWriter 将字节流转换为字符流.是字节流通向字符流的桥梁.如果不指定字符集编码,该解码过程将使用平台默认的字符编码,如:UTF-8: 步骤: 1.创建流 子类对象  绑定数 ...

  10. 大数据入门到精通2--spark rdd 获得数据的三种方法

    通过hdfs或者spark用户登录操作系统,执行spark-shell spark-shell 也可以带参数,这样就覆盖了默认得参数 spark-shell --master yarn --num-e ...