<span role="heading" aria-level="2">走近webpack（5）-devtool及babel的使用

走近webpack（5）–devtool及babel的使用

全栈程序员-站长 • 2022年3月25日下午12:00 • 未分类 • 阅读 50

大家好，又见面了，我是你们的朋友全栈君。

　　这一章咱们来说一下如何使用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

<span role="heading" aria-level="2">走近webpack（5）--devtool及babel的使用