webpack升級2.0遇到的坑

• 可刪除的內容

  DedupePlugin函數被刪除了
    
    OccurrenceOrderPlugin函數變成默認引用的，以前引用的也能夠刪除了
    
    module.preLoaders被取消了
    
    json-loader變成內置了，不須要在單獨安裝json-loader包

• 語法的改變

  之前省略的用來配置解析各類類型文件的loader，如今不能省略後綴loader，好比babel，如今必須寫babel-loader

• 打包流程的改變

  webpack以前的打包流程是：babel-loader轉碼 -> webpack打包 -> uglify壓縮
     
  webpack2.0的打包流程：webpack打包 -> babel-loader轉碼 -> uglify壓縮

• webpack2的實現了tree-shaking的原理

  **什麼是tree-shaking**？
    
    所謂tree-shaking就是去掉不須要的代碼，保留活代碼。
    commonjs模塊是動態加載的而且能夠重命名，在靜態分析時要知道哪些代碼時不被執行的，須要對數據流進行分析。
    tree-shaking藉助es6模塊機制。
    經過import/export等關鍵字來定義輸入輸出的方法，且其重命名只能經過as這個關鍵字，
    模塊一旦被import進來，就是隻讀的，這樣，咱們只根據名字，就能夠從入口文件一路溯源到模塊定義處，只把用到的方法打包進來。

  webpack想要知道哪些代碼不須要就的解析es6模塊語法，webpack藉助acorn（只有解析功能，沒有轉換功能）實現的，webpack2會統計每一個模塊export方法被使用的次數，並把沒有用到的export刪除掉。eg：

  **help.js**
  export function foo() {
      return 'foo';
  }
  export function bar() {
      return 'bar';
  }
  
  
  **main.js**
  import {foo} from './helps';
  
  
  **help.bundle.js 打包以後的help.js的文件**
  function(module, exports, __webpack_require__) {
      /* harmony export */ exports["foo"] = foo;
      /* unused harmony export bar */; 未被使用的模塊會被標記成這樣
      function foo() {
          return 'foo';
      }
      function bar() {
          return 'bar';
      }
  }
  
  **help.bundle.min.js 壓縮以後的help.bundle.js**
  /* 通過壓縮後未被使用的 bar模塊被刪除了 */
  function (t, n, r) {
      function e() {
          return "foo"
      }
      n.foo = e
  }

  使用tree-shaking須要設置.bablerc文件中的es2015

  {
     "presets": [
       [
             "es2015", {"modules": false}],
             // webpack understands the native import syntax, and uses it for tree shaking
             "stage-2",
             // Specifies what level of language features to activate.
             // Stage 2 is "draft", 4 is finished, 0 is strawman.
             // See https://tc39.github.io/process-document/
             "react"
             // Transpile React components to JavaScript
       ],
     "plugins": [
         "react-hot-loader/babel"
         // Enables React code to work with HMR.
       ]
     }

• UglifyjsWebpackPlugin插件的修改

  UglifyjsWebpackPlugin插件在代碼壓縮時候的使用須要手動生命sourceMap的值是true，默認的是false，
    在壓縮的時候會生成.map文件（在dll的配置文件中，編譯時不生成all.map文件，在dev.config中致使load map文件找不到）