摘要：重要特性枚舉特性增加了對(duì)特性的支持。重要特性另一個(gè)就是基于靜態(tài)模塊分析僅支持標(biāo)準(zhǔn)寫法。這樣之后整體只能通過(guò)的方式。另外在使用過(guò)程中默認(rèn)是將和轉(zhuǎn)為所以需要關(guān)閉預(yù)設(shè)功能。這樣做的目的就是為了項(xiàng)目工程化實(shí)現(xiàn)大項(xiàng)目的分工協(xié)作提高開發(fā)效率。

這里是webpack official提供的一到二的升級(jí)指南,二兼容一的寫法,給我的感覺(jué)是二的寫法更規(guī)范,使用起來(lái)也比較簡(jiǎn)潔。

webpack2增加了對(duì)es6特性的支持。支持import和export寫法。之前需要通過(guò)babel來(lái)弄這個(gè)。

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

export function A() {

}
export function B() {

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

上面是反模式寫法,相當(dāng)于export default是把后面變量先賦值給default在輸出,輸出的是對(duì)象,沒(méi)法利用ES6模塊系統(tǒng)的多輸入多輸出特性。

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

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

做了個(gè)demo (case1),實(shí)驗(yàn)結(jié)果如下,效果還是比較明顯的。

說(shuō)一下應(yīng)用場(chǎng)景,由于有些第三方庫(kù),是編譯好的commonjs格式,雖然可以模塊化引入加載,但是沒(méi)法tree-shaking,除非你有未編譯的es6 source。
另外在使用過(guò)程中,babel 默認(rèn)是將import和export轉(zhuǎn)為require,所以需要關(guān)閉預(yù)設(shè)功能。

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

另外我想說(shuō)的在做這個(gè)demo工程中,發(fā)現(xiàn)開啟tree-shaking后會(huì)標(biāo)記無(wú)用代碼,但是不會(huì)刪除,要做到真正的DCE,還需要進(jìn)行Uglify處理。

第二個(gè)應(yīng)用場(chǎng)景就是有利于組件化開發(fā),下面這個(gè)截圖中是平時(shí)使用到的vue component,每個(gè)component集成了html、js、css?？梢宰鳛槎鄮ЫM件存在,
這些組件既具有重用性,同時(shí)也可以利用es6的模塊化機(jī)制結(jié)合webpack2,實(shí)現(xiàn)組件之間的依賴。這樣做的目的就是為了項(xiàng)目工程化,實(shí)現(xiàn)大項(xiàng)目的分工協(xié)作,提高開發(fā)效率。

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

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

舊版loader連接器寫法

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

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

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

新webpack2連接器寫法,非常好,簡(jiǎn)介明了。

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

resolve.extensions配置項(xiàng)將不再要求強(qiáng)制轉(zhuǎn)入一個(gè)空字符串,下面是我使用的配置。

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

原先的話第一個(gè)為空,現(xiàn)在被移動(dòng)到resolve.enforceExtension。

json-loader在2中已經(jīng)內(nèi)置,讀取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
+  })
]

在寫這個(gè)的過(guò)程中寫了個(gè)腳手架基于webpack2,自己以后項(xiàng)目開發(fā)打算就基于這個(gè),還需要完善。

在寫這個(gè)過(guò)程中遇到幾個(gè)問(wèn)題:

http://yeoman.io/generators/ 顯示不出來(lái)，說(shuō)是one hour synchronize可是超過(guò)了一個(gè)小時(shí)還是沒(méi)看到。
在此的建議就是直接install yo一下試試看能不能用，不要干等著

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