走近webpack(5)--devtool及babel的使用

  这一章咱们来说一下如何使用babel以及如何用webpack调试代码。这是基础篇的最后一章,这些文章只是罗列的给大家讲解了在一些场景中webpack怎样使用,这章结束后会给大家讲解一下如何在我们实际的开发及上线的工作环境中自如的使用webpack。

  既然我们要使用babel,那babel是什么呢?一句话,babel能让你使用当前浏览器还暂时或者无法支持的“js”,比如es6,es7,JSX等。

  那么来安装一下吧:

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
/*babel-core是babel的核心功能包,babel-loader就不用说了,转换目标代码的babel包,babel-preset-env也就是转换es6语法的包,babel-preset-react就是转换JSX的包*/

  安装完成之后,我们需要在loader中配置一下:

{
    test:/\.(jsx|js)$/,
    use:{
        loader:'babel-loader',
        options:{
            presets:[
                "env","react"
            ]
        }
    },
    exclude:/node_modules/
}

  让我们简单修改一下src/entry.js中的代码,就改成这样吧:

let name = "Hello zaking"
document.getElementById('title').innerHTML=name;

  npm run server,发现完全没问题。

  那么做一个小小的修改,我们在根目录下新建一个.babelrc文件,其实babel的配置项很多,为了让config.js看起来更清爽,咱们有关于babel的配置都写在这里(只是目前咱们没用到多少)。

  .babelrc的内容这样写:

{
  "presets":["react","env"]
}

  然后修改一下config.js中的babel-loader配置:

{
     test:/\.(jsx|js)$/,
     use:{
          loader:'babel-loader'
      },
       exclude:/node_modules/
}
/*也就是删除了options配置项*/

  修改完成之后,我们再来npm run server试一下。没问题!

  那么打包完成之后我们开发的时候如何调试代码呢?我们可以通过配置devtool生成map,来使调试变得更简单。map其实就是源文件和打包后生成文件的一种映射。

  在配置devtool时,webpack给我们提供了四种选项。

  • source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度;
  • cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便。
  • eval-source-map:使用eval打包源文件模块,在同一个文件中生产干净的完整版的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定要不开启这个选项。
  • cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法,生产的 Source map 会和打包后的JavaScript文件同行显示,没有影射列,和eval-source-map选项具有相似的缺点。

  四种打包模式,有上到下打包速度越来越快,不过同时也具有越来越多的负面作用,较快的打包速度的后果就是对执行和调试有一定的影响。

  (更多配置信息可以查看webpack文档:https://doc.webpack-china.org/configuration/devtool/)

  个人意见是,如果大型项目可以使用source-map,如果是中小型项目使用eval-source-map就完全可以应对,需要强调说明的是,source map只适用于开发阶段,上线前记得修改这些调试设置。

  使用方法也非常简单,只要在webpack.config.js中加一个配置项就可以了:

记住一个很必要的事情,就是如果你使用了uglifyjs-webpack-plugin,记得在该插件的配置中写入sourceMap:true字段。这样才可以正常的生成sourceMap,详情请查看https://github.com/webpack-contrib/uglifyjs-webpack-plugin

    OK,至此,webpack的基本配置和使用方法就讲解完了。这个项目的相关demo已经上传到我的github。大家可以查阅学习。但是我还是建议大家一定要自己跟着教程多练习。不然是没什么实际效果的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小车博客

自建磁力链搜索网站做老司机

2.8K40
来自专栏PHP在线

3种web会话管理的方式

http是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的。当然它知道是哪个客户端地址发过来的,但是对于我们的应用来...

20830
来自专栏乐百川的学习频道

使用内网穿透工具frp

前几天写了篇文章用本机电脑搭建网站(域名、DNS解析),写完第二天发现我的网站访问不上去了。仔细研究了一下,发现我想的太简单了。很早一些时候,运营商会给我们分配...

2.2K110
来自专栏编程坑太多

『中级篇』Docker Cloud自动构建 Docker image(55)

PS:自动化构建的build image,是不是感觉很爽,但是这里的Dockfile这是需要基础牢靠。本节也是以后学习的基础。

18150
来自专栏Python研发

程序中的异步和同步

同步:   主机A发送数据的时候,主机B必须等待接收,处于阻塞状态,这就好比别人给你打电话,你必须当场听话,否则则【错失良机】。

10520
来自专栏weixuqin 的专栏

Nginx 进行性能配置

  总所周知,网络上我们购买的服务器的性能各不相同,如果采用 Nginx 的默认配置的话,无法将服务器的全部性能优势发挥出来,我们应该选择适合自己需求的配置。

10020
来自专栏数据和云

基于scn备份解决dg归档丢失的方法论

作者介绍 ? 黄堋 多年一线DBA经验,曾服务于电信、电网、医院等行业客户。擅长数据库优化、数据库升级迁移、数据库故障处理 当主备同步中断了,备库想快一点恢复,...

46970
来自专栏快乐八哥

Ajax几种常用模式

设计模式不是要遵循的标准,只不过是对增进行之有效的解决方案的总结。每个模式都凝聚了开发人员社区的集体智慧,而每个开发人员都可以决定是否在其应用中实现某个模式。 ...

212100
来自专栏bboysoul

编译安装squid

什么是squid,简单的说squid是一款代理缓存软件就是加速网站访问的,国内部分cdn服务用的就是squid,cdn大家应该清楚吧,内容分发网络,cdn的作用...

15230
来自专栏smy

webapp开发调试环境--weinre配置

    用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳。有时在pc上开发出来的web...

451110

扫码关注云+社区

领取腾讯云代金券