摘要：重要特性枚舉特性增加了對特性的支持。重要特性另一個就是基于靜態模塊分析僅支持標準寫法。這樣之后整體只能通過的方式。另外在使用過程中默認是將和轉為所以需要關閉預設功能。這樣做的目的就是為了項目工程化實現大項目的分工協作提高開發效率。

這里是webpack official提供的一到二的升級指南,二兼容一的寫法,給我的感覺是二的寫法更規范,使用起來也比較簡潔。

webpack2增加了對es6特性的支持。支持import和export寫法。之前需要通過babel來弄這個。

重要特性tree-shaking(另一個就是rollup),基于es6靜態模塊分析(僅支持標準寫法)。大致原理就是通過分析js的AST,依賴檢查等步驟,建立一個"對象依賴樹",從而將被使用和被引用的的
對象抽出,合成最小可用程序集。

export function A() {

}
export function B() {

}
export default {
    "A":A,
    "B":B,
}

上面是反模式寫法,相當于export default是把后面變量先賦值給default在輸出,輸出的是對象,沒法利用ES6模塊系統的多輸入多輸出特性。

正規寫法,分別輸出。這樣之后整體import只能通過import * as XXX的方式。

// export {
//     "A":A,
//     "B":B,
// }

做了個demo (case1),實驗結果如下,效果還是比較明顯的。

說一下應用場景,由于有些第三方庫,是編譯好的commonjs格式,雖然可以模塊化引入加載,但是沒法tree-shaking,除非你有未編譯的es6 source。
另外在使用過程中,babel 默認是將import和export轉為require,所以需要關閉預設功能。

["env", {"modules": false}]

另外我想說的在做這個demo工程中,發現開啟tree-shaking后會標記無用代碼,但是不會刪除,要做到真正的DCE,還需要進行Uglify處理。

第二個應用場景就是有利于組件化開發,下面這個截圖中是平時使用到的vue component,每個component集成了html、js、css。可以作為多帶帶組件存在,
這些組件既具有重用性,同時也可以利用es6的模塊化機制結合webpack2,實現組件之間的依賴。這樣做的目的就是為了項目工程化,實現大項目的分工協作,提高開發效率。

loaders改名為rules,且寫loader時不能缺少后綴, 針對loader增加option參數。提倡這樣做。

options: {
                cacheDirectory: true,
                presets: [
                    ["es2015", {modules: false}] 
                ]
            }

舊版loader連接器寫法

loader: "style-loader!css-loader!less-loader"。

下面是我項目中的寫法,之前還遇到個坑,最后那一項拆開了就error了,這種寫法沒條理性,不易閱讀,不推薦。

 { test: /.styl$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!stylus-loader") }

新webpack2連接器寫法,非常好,簡介明了。

use: [
"style-loader",
"css-loader",
"less-loader"
]

resolve.extensions配置項將不再要求強制轉入一個空字符串,下面是我使用的配置。

resolve: {
        extensions: [".js", ".css",".sass", ".scss", ".less",  ".vue"],
    },

原先的話第一個為空,現在被移動到resolve.enforceExtension。

json-loader在2中已經內置,讀取json文件不用加loader。
取消module.preLoaders,具體用法如下所示

 preLoaders: [{
         test: /.js$/,
         loader: "eslint-loader",//webpack1寫法
         exclude: /node_modules/
         }]
-------------------------------------------------         
        rules: [{
            test: /.js$/,
            loader: "eslint-loader",
            exclude: /node_modules/,
            enforce: "pre" //webpack2寫法
        }      

1系列的ExtractTextPlugin不兼容wp2,需多帶帶安裝ExtractTextPlugin的v2版本

module: {
  rules: [
    {
      test: /.css$/,
-      loader: ExtractTextPlugin.extract("style-loader", "css-loader", { publicPath: "/dist" })
+      use: ExtractTextPlugin.extract({
+        fallback: "style-loader",
+        use: "css-loader",
+        publicPath: "/dist"
+      })
    }
  ]
}
--------------------------------------------------------------------------------------------------
plugins: [
-  new ExtractTextPlugin("bundle.css", { allChunks: true, disable: false })
+  new ExtractTextPlugin({
+    filename: "bundle.css",
+    disable: false,
+    allChunks: true
+  })
]

在寫這個的過程中寫了個腳手架基于webpack2,自己以后項目開發打算就基于這個,還需要完善。

在寫這個過程中遇到幾個問題:

http://yeoman.io/generators/ 顯示不出來，說是one hour synchronize可是超過了一個小時還是沒看到。
在此的建議就是直接install yo一下試試看能不能用，不要干等著

npm run start而不是直接webpack-dev-server，前者基于當前package.json中的版本，后者是基于系統版本。