前言

說起WebPack的發展歷程，不由想起了一那句“千里馬常有，而伯樂不成有的”的名言，相信很多人都聽說過Grunt, Gulp 這樣的架構工具，但是卻很少有人涉及應用過Webpack, 但是由於React的技術框架的風靡一時，webpack的地位以及應用度得到了很大的提升，這不得不感謝Facebook的架構。

對此，我也談一下webpack在React專案中的應用實踐，究竟為何要用這樣一個技術架構。

什麼是webpack

首先，webpack是一款前端的架構工具，也是近期最火的一款模組載入器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模組來使用和處理。

我們可以直接使用 require(XXX) 或者import(XXX)的形式來引入各模組，即使它們可能需要經過編譯（比如JSX和sass）, webpack擁有很多的模組載入器（loader）來處理這些問題。

webpack的優勢何在

1. webpack 是以 commonJS 的形式來書寫指令碼滴，但對 AMD/CMD 的支援也很全面，方便舊專案進行程式碼遷移。
2. 支援多種檔案資源，比如js, coffee等等。
3. 配置簡單，開發便捷，比如打包、壓縮混淆、圖片轉base64等。
4. 擴充套件性強，外掛機制完善，特別是支援 React 熱載入外掛（ react-hot-loader ）

安裝

我們常規直接使用 npm 的形式來安裝：

$ npm install webpack -g

常規專案還是把依賴寫入 package.json 包去更人性化：

$ npm init
$ npm install webpack --save-dev

配置

每個webpack的工程都會有一個配置檔案，就比如grunt中的gruntfile.js, gulp中的gulpfile.js。

webpack中的檔名字叫做webpack.config.js, 這個檔案需要在專案根目錄建立，預設的執行指令為‘webpack’。

簡單配置：

module.exports = {
    entry
 
: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loaders: ['style-loader', 'css-loader']
        }]
    }
};

這裡解釋一下幾個屬性的作用：

• entry:使用者配置整個專案工程檔案的入口點。
• output：用於配置解析編譯後生成壓縮檔案路徑。
• module: 主要定義專案中的解析器例如css, jsx， babel等等，這個很想gulp,grunt的task，這裡比較好的一點是我們不需要require這些loader，但是需要額外安裝的。 而gulp是需要的。

可以配置多個entry:

var path = require('path');

var config = {
  entry: {
    admin: './admin/index.js',
    consumer: './consumer/index.js'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: '[name].bundle.js'
  }
};

module.exports = config;

上面程式碼中的path, __dirname為webpack特有的方法屬性用於指定路徑。

常用loader的分析

對於webpack來講，可貴之處在於提供了大量可用的loader處理我們的資原始檔，Loader 是支援鏈式執行的，如處理 sass 檔案的 loader，可以由 sass-loader、css-loader、style-loader 組成，由 compiler 對其由右向左執行，第一個 Loader 將會拿到需處理的原內容，上一個 Loader 處理後的結果回傳給下一個接著處理，最後的 Loader 將處理後的結果以 String 或 Buffer 的形式返回給 compiler。

如下常用幾項：

前處理器

• css-loader 處理css中路徑引用等問題
• style-loader 動態把樣式寫入css
• sass-loader scss編譯器
• less-loader less編譯器
• postcss-loader scss再處理

loaders之 js處理

• babel-loader
• jsx-loader

loaders: [
  {test: /\.js$/, loader: "babel", exclude: /node_modules/},
  {test: /\.jsx$/, loader: "jsx-loader"}
  {test: /.css$/, loader: 'style!css'} ]

image-loader

loader安裝：

sudo install image-webpack-loader --save-dev

config程式碼：

module: {
    loaders: [
        {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                        'file?hash=sha512&digest=hex&name=img/[hash].[ext]',
                        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
        }
    ]
},

url-loader

sudo npm install url-loader --save-dev

url-loader的功能和image-loader功能比較類似，只是url-loader可以k控制小於某個大小的圖片轉成dataurl。

plugin的應用

webpack的plugin可以幫助開發者處理壓縮混淆等程式碼上的問題，使用也是相當方便，具體我們看一下程式碼：

plugins: [
        //單獨生成html檔案
        new HtmlWebpackPlugin({
            filename: '../index.html',//生成的html及存放路徑，相對於path
            template: './src/index.html',//載入檔案及路徑
            publicPath: "js/",//這是build檔案下html檔案引用js檔案的路徑
            chunks: ['index'],//需要引入的chunk，不配置就會引入所有頁面的資源
        }),
        // 使用browser-sync實時重新整理頁面
        new BrowserSyncPlugin({
          host: 'localhost',
          port: 3000,
          server: { baseDir: ['./build/'] }//會預設訪問./build/index.html
        }),
        //負責壓縮JS程式碼，並控制是否要顯示警告
        new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true
      }
    }),
    new webpack.optimize.OccurenceOrderPlugin()
      ]

這裡主要說明一下一下幾個個外掛：

new webpack.optimize.DedupePlugin() 

主要查詢相等或近似的模組，避免在最終生成的檔案中出現重複的模組，比如可以用它去除依賴中重複的外掛。

new webpack.optimize.OccurenceOrderPlugin() 

這個外掛為元件和模組分配ID，通過這個外掛webpack可以分析和優先考慮使用最多的模組，併為它們分配最小的ID，通過分析ID，可以建議降低總檔案的大小。

new webpack.HotModuleReplacementPlugin()

全域性開啟程式碼熱替換,

new ExtractTextPlugin("styles.css")

預設情況下，css是被打包到js中的如果接受不了，我們可以應用這個plugin將css style提取出來。

webpack-dev-server使用

webpack-dev-server比較好用的地方在於熱替換，更改後不需要重新重新整理瀏覽器，配置上相比其他工具容易的多。簡稱（HMR）.

sudo npm install webpack-dev-server --save-dev

我們只要在啟動時候指定 –hot指令即可，例如：

webpack-dev-server --progress --colors --hot --inline -d

可以直接複製使用哦，開啟url, 嘗試修改程式碼，看看能否自動重新整理！

執行指令分析

webpack的執行相對簡單：

webpack -watch 提供watch方法，實時進行打包更新
webpack -p 對打包後的檔案進行壓縮
webpack -d 提供SourceMaps，方便除錯
webpack --colors 輸出結果帶彩色，比如：會用紅色顯示耗時較長的步驟
webpack --profile 輸出效能資料，可以看到每一步的耗時
webpack --display-modules 預設情況下 node_modules 下的模組會被隱藏，加上這個引數可以顯示這些被隱藏的模組

通常情況下我們也會用npm包管理器進行封裝，以便於使用，例如：

"scripts": {
    "start": "./node_modules/.bin/webpack -d --progress --colors --watch",
    "build/":"./node_modules/.bin/webpack  -p"
  }

總結

總體上來講，webpack並不是一個新的工具，之前使用範圍也不是很廣泛，但是自由其過人之處，很多loader還有待繼續完善，相信之後的版本會給大家一個不錯的驚喜。

個人微信公眾號