03Source Maps

回顾

1.原始方法

1.npm init 建立package.json

2.npm i webpack -D

3.webpack 入口文件地址(以package.json这层文件夹去找) -o 出口文件地址 --mode development

2.高级一点（webpack.config.js)

1.npm init 建立package.json

2.npm i webpack -D

3.建立webpack.config.js

4.webpack --mode development

在稍微高级一点(npm start)

在2的基础上 在package.json文件里

        "scripts": {
          "start":"webpack --mode development"
        },

    

新:生成Source Maps（使调试更容易

开发老是离不开调试，方便的调试能极大的提升开发效率，不过有时候经过打包后的文件，你是不容易找到出错了的地方，对应的你写的代码的位置的，Source Maps就是来帮咱们解决这个问题的。

经过简单的配置，webpack就能够在打包时为咱们生成的source maps，这为咱们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。

        在webpack的配置文件中配置source maps，须要配置devtool，它有如下四种不一样的配置选项，各具优缺点，描述以下：

        devtool选项	配置结果
        source-map	在一个单独的文件中产生一个完整且功能彻底的文件。这个文件具备最好的source map，可是它会减慢打包速度；
        cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提升了打包速度，可是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试形成不便；
        eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项能够在不影响构建速度的前提下生成完整的sourcemap，可是对打包后输出的JS文件的执行具备性能和安全的隐患。在开发阶段这是一个很是好的选项，在生产阶段则必定不要启用这个选项；
        cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具备类似的缺点；
        正如上表所述，上述选项由上到下打包速度愈来愈快，不过同时也具备愈来愈多的负面做用，较快的打包速度的后果就是对打包后的文件的的执行有必定影响。
        
        对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它，咱们继续对上文新建的webpack.config.js，进行以下配置:
        
        module.exports = {
          devtool: 'eval-source-map',
          entry:  __dirname + "/app/main.js",
          output: {
            path: __dirname + "/public",
            filename: "bundle.js"
          }
        }
        cheap-module-eval-source-map方法构建速度更快，可是不利于调试，推荐在大型项目考虑时间成本时使用。