Webpack 之 babel-loader文件预处理器详解


Posted in Javascript onMarch 23, 2018

loader官方解释是文件预处理器,通俗点说就是webpack在处理静态文件的时候,需要使用 loader 来加载各种文件,比如: html文件需要使用html-loader ,css 需要使用css-loader 、 style-loader 等等。

今天我们来认识的是 babel-loader,用来处理ES6语法,将其编译为浏览器可以执行的js语法。

安装

我们需要用到 babel-loader babel-core babel-preset

配合版本: webpack 3.x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
webpack 3.x babel-loader 7.x | babel 6.x

使用

先来上一个小栗子:

var htmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    filename: 'js/bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/, // (不处理node_modules 和 bower_components下的js文件) 优化处理加快速度
        use: {
          loader: 'babel-loader',
          options: {     // options选项中的presets设置的就是当前js的版本
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'index.html',
      inject: 'body',
      filename: 'index.html'
    })
  ]
}

可以使用 options 属性 来给 loader 传递选项。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery BS,dialog控件自适应大小
Jul 06 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
JQuery中clone方法复制节点
May 18 Javascript
简单学习vue指令directive
Nov 03 Javascript
axios学习教程全攻略
Mar 26 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 #Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 #Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 #Javascript
JavaScript 五大常见函数
Mar 23 #Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 #Javascript
剖析Angular Component的源码示例
Mar 23 #Javascript
vue利用axios来完成数据的交互
Mar 23 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php头像上传预览实例代码
2017/05/02 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
[01:08]DOTA2次级职业联赛 - Shield战队宣传片
2014/12/01 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
小学五年级学生评语
2014/04/22 职场文书
应急处置方案
2014/06/16 职场文书
小学秋季运动会报道稿
2014/09/30 职场文书
中标通知书
2015/04/17 职场文书
会议简讯范文
2015/07/20 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书