背景:最近webpack升級了2.0的版本，支援程式碼靜態依賴解析打包了。嚇得我趕緊弄個小demo出來試試水。本文預設讀者都有一定的webpack使用經驗，沒使用過webpack的同學最好先看下相關文件。

靜態依賴打包可以去掉很多無用的程式碼，減少檔案體積。下面兩張圖片是樓主打包的兩個檔案，一個是使用tree shaking，一個是沒使用的，都是為了引用一個方法encodeHTML。對比下生成檔案的差異。

普通require模式引入

es6 tree shaking

可以看到tree shaking 只打包了我們需要的那個方法。樓主的demo支援打包多頁面，地址在最下面，各位小夥伴可以自己

看完了tree shaking的效果，下面我們來討論以下幾點

1. 如何開啟webpack2的tree shaking功能

2. Webpack2配置注意事項

3. ES6模組編寫注意事項

4.  一些配置優化點

如何開啟webpack2的tree shaking功能

首先，只有es6模組才能使用webpack2做靜態依賴解析。因為現在大部分瀏覽器還不支援es6模組語法，所以我們得下載babel，利用babel對程式碼進行編譯。正常使用Babel 6來轉換，一般設定presets: ['es2015']。但是這種方式使用的 transform-es2015-modules-commonjs外掛意味著

//關鍵程式碼，只有去掉babel的cjs模組，才能做tree shaking打包
test: /\.js$/,
loader:'babel',
query: {
    cacheDirectory: true,
    plugins: [
        'transform-es2015-template-literals',
        'transform-es2015-literals',
        'transform-es2015-function-name',
        'transform-es2015-arrow-functions',
        'transform-es2015-block-scoped-functions',
        'transform-es2015-classes',
        'transform-es2015-object-super',
        'transform-es2015-shorthand-properties',
        'transform-es2015-computed-properties',
        'transform-es2015-for-of',
        'transform-es2015-sticky-regex',
        'transform-es2015-unicode-regex',
        'check-es2015-constants',
        'transform-es2015-spread',
        'transform-es2015-parameters',
        'transform-es2015-destructuring',
        'transform-es2015-block-scoping',
        'transform-es2015-typeof-symbol',
        ['transform-regenerator', {async: false, asyncGenerators: false}]
]
}
exclude: /node_modules/
 

Webpack2配置注意事項

Webpack2相對webpack1做了一些配置的更改,更改的配置比較多，這裡只是簡單的介紹下幾個影響構建的部分

Resolve option

webpack1中，檔案路徑查詢的resolve.root屬性被刪除了，取代的是resolve.module屬性。

Plugins

//webpack.optimize.OccurenceOrderPlugin外掛不再需要配置
//ExtractTextPlugin配置方式變更, ExtractTextPlugin需要更新到2.0版本。新老配置方式對比:
Webpack1 : ExtractTextPlugin.extract('css!postcss!sass')
Webpack2: ExtractTextPlugin.extract({
                    fallbackLoader: "style-loader",
                    loader: "css-loader?minimize"
                })
//CommonsChunkPlugin配置方式變更
Webpack1:CommonsChunkPlugin('common/common','js/[name].js')
Webpack2:CommonsChunkPlugin({name:'commonFile',filename:'js/[name].[hash:8].js' })

HMR communication

在 Webpack 1 中，更新訊號用的是Web Messaging API（postMessage）。而Webpack 2將使用一個標準的事件觸發器來傳遞事件訊號。這表示WebSocket必須內聯到打包檔案中。webpack-dev-server必須使用新版本

更多配置可以看樓主的demo和下文參考資料中的連結

ES6模組編寫注意事項

Webpack2支援新的非同步載入模組方法System.import。使用這個方法可以返回一個promise物件，模組載入失敗可以被捕獲,支援動態模組名，每個動態模組都會產生新的chunk檔案。非同步載入的檔案，沒必要分別匯出模組的方法。

示例程式碼

function route(path, query) {
   return System.import("./routes/" + path + "/route")
        .then(route => new route.Route(query));
}

這會為每種可能的路徑組合都建立一個對應的chunk。

非非同步的模組，使用export關鍵字，匯出函式和變數，在構建時，才可以分析依賴進行構建。

示例程式碼

export function encodeHTML(str) {
    if (typeof str == 'string') {
        var ar = ['&', '&', '<', '<', '>', '>', '"', '"'];
        for (var i = 0; i < ar.length; i += 2) {
            str = str.replace(new RegExp(ar[i], 'g'), ar[1 + i]);
        }
        return str;
    }
    return str;
}
 
export var a = ['hello world'];
 
//引用
import {encodeHTML} from 'util/string_es6'

一些配置優化點

UglifyJsPlugin配置output.max_line_len屬性，指定壓縮檔案的單行最大長度，方便在線上程式碼出現js問題的時候可以快速定位到出錯的程式碼位於哪一行。

webpack.DllPlugin打包不怎麼改動的檔案，提高構建速度。

babel打包預設會加上use strict，如果使用了argument.callee等js程式碼。會導致一些語法錯誤。可以使用外掛babel-plugin-transform-remove-strict-mode或者用gulp全域性替換下。

demo地址:https://github.com/xyc-cn/webpack2-demo/tree/master

參考資料