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方法構建速度更快，可是不利於調試，推薦在大型項目考慮時間成本時使用。