webpack2-update之路

引言

這裏是webpack official提供的一到二的升級指南,二兼容一的寫法,給個人感受是二的寫法更規範,使用起來也比較簡潔。

重要特性枚舉

特性1

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,實現組件之間的依賴。這樣作的目的就是爲了項目工程化,實現大項目的分工協做,提升開發效率。

特性2

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"
]

特性3

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

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

原先的話第一個爲空,如今被移動到resolve.enforceExtension。

特性4

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寫法
        }

特性5

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
+  })
]

tips

在寫這個的過程當中寫了個腳手架基於webpack2,本身之後項目開發打算就基於這個,還須要完善。

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

1. http://yeoman.io/generators/ 顯示不出來，說是one hour synchronize但是超過了一個小時仍是沒看到。
   在此的建議就是直接install yo一下試試看能不能用，不要乾等着
2. npm run start而不是直接webpack-dev-server，前者基於當前package.json中的版本，後者是基於系統版本。