webpack总结(2)引用loader方式,babel

本文深入介绍了Webpack中的Loaders,一种用于处理各种文件类型的强大工具。文章涵盖了Loaders的基本概念、安装方法、配置细节及如何使用Babel进行JSX转换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Loaders

鼎鼎大名的Loaders登场了!

Loaderswebpack提供的最激动人心的功能之一了。通过使用不同的loaderwebpack有能力调用外部的脚本或工具,实现对不同格式的文件的处理,比如说分析转换scss为css,或者把下一代的JS文件(ES6,ES7)转换为现代浏览器兼容的JS文件,对React的开发而言,合适的Loaders可以把React的中用到的JSX文件转换为JS文件。

Loaders需要单独安装并且需要在webpack.config.js中的modules关键字下进行配置,Loaders的配置包括以下几方面:

  • test:一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)
  • loader:loader的名称(必须)
  • include/exclude:手动添加必须处理的文件(文件夹)或屏蔽不需要处理的文件(文件夹)(可选);
  • query:为loaders提供额外的设置选项(可选)


  • 使用loader


    require的方式使用loader

    配置文件中使用loader


    CLI的方式使用loader --module-bind命令后跟指定的loader
      --module-bind "css=style!css" 

  • babel 安装
    执行命令行:
    npm install --save-dev babel-loader babel-core(按照babel-loader,和babel-core)

    安装babel中的 preset-latest 插件

  • 版本不断的更新,要指定参数,使用 presets,告诉babel-loader怎么处理我们的js,让它为我们的js去转换指定的某一些特性:
  • 转换es2015的特性 指定es2015 。。。如要转换所有的特性,指定latest,包括一下:


    那我们怎么指定这些插件呢?(参考webpack官网,query parameters 参数部分)
    1.require方式中,loader的后面+?+参数

    在配置文件webpack.config.js中指定:


    可以在package.json 文件中指定(在package.json指定后,无需在配置文件中指定)



    打包过程中,会发现babel loader 转换特别耗时,如何改善呢?

    例如,exclude,include参数

    以上exclude,include的路径有误,官方解释:可以是正则表达式,可以是绝对路径的字符串,还可以是个函数,数组。。。

    require node——module中的path path.resolve(__dirname,'mode_modules')  解析绝对路径(当前路径+文件所在的相对路径),
    npm run webpack 打包一下会发现打包速度快很多


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值