走近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。你们能够查阅学习。可是我仍是建议你们必定要本身跟着教程多练习。否则是没什么实际效果的。