摘要：添加依賴到如何使用依賴當你再興建一個文件的時候，就不需要一個個插件安裝了，將文件復制到當前文件下，并輸入，即通過里的依賴關系，自動把依賴安裝好了。第四步新建配置文件默認的配置文件在項目目錄下為。

WilsonLiu"s blog 首發地址

早就想嘗試webpack的，卻一直沒有時間，恰逢周末，又時值最近在公司實習的時候嘗到用fekit做模塊化的構建工具的爽。所以就開始以公司的項目結構去使用webpack的，當然最后還是有點問題的，只能折中解決了。公司的方案是前后端完全分離，html代碼放在后端服務器上，css，js，images等資源文件放在前端服務器，兩者是不同的域名。問過之后，才知道原來是因為，js每次請求會帶上cookie，增加了不必要的帶寬，所以將其放在前端服務器上，因為script的標簽可以跨域引用(這也是jsonp的原理)。 所以主要的目錄結構大概是，當然我說的折中是把html直接放進了prd文件夾下，這個之后要說明原因。

+html
+src
+prd
+fekit-module

首先，你需要安裝了node.js

npm install webpack -g

npm init

疑問：沒有使用過相關構建工具的小伙伴，肯定疑惑。為什么全局安裝后還需要局部安裝？ 原因：每個項目需要的依賴不同，如果都安裝在全局，那么不同項目我們就無法做到定制化的服務，而是大鍋粥式的服務，無法滿足高效生產的目標。所以需要局部安裝。

npm install webpack --save-dev  //--save-dev 添加依賴到package.json

如何使用依賴？

當你再興建一個文件的時候，就不需要一個個插件安裝了，將package.json文件復制到當前文件下，并輸入npm install，即通過package.json里的依賴關系，自動把依賴安裝好了。當然，其他文件結構還是要自己新建。
這里提供一下我的package.json文件。

  {
    "name": "angular",
    "version": "0.0.0",
    "description": "practice",
    "main": "gulpfile.js",
    "scripts": {
      "test": "echo "Error: no test specified" && exit 1"
    },
    "author": "",
    "license": "BSD-2-Clause",
    "devDependencies": {
      "webpack": "~1.12.11",
      "style-loader": "~0.13.0",
      "extract-text-webpack-plugin": "~1.0.1",
      "file-loader": "~0.8.5",
      "url-loader": "~0.5.7",
      "css-loader": "~0.23.1"
    }
  }

默認的配置文件在項目目錄下為 webpack.config.js。 簡單的操作可以參看下面這個文檔。 《Webpack 中文指南》

完成，上面四步，可以說你就已經走進了webpack的大門了。 但是，要想個性化的定制服務，理解每一個參數～ 查看了許多博客，講的都差不多，都不是非常深入。所以，還是得去看官方文檔 webpack

參數真的是非常多，一個個把認為會用到的敲過去，調了調，試了試。

接下來，本文，根據自己的學習歷程，講下我用到的重要部分，首先貼一下，項目結構，和配置文檔。

-app  
+node_modules   
-prd    
+html   
+css    
+js   
+images   
-src    
+css
+js   
+images   
-gulpfile.js    
-webpack.config.js    
-README.md    


var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    context: __dirname + "/src",
    entry: {
      test:["./js/test.js","./js/test1.js"]
      test2:"./js/test2.js",
    },
    output: {
        path: __dirname + "/prd",
        publicPath: "../",
        filename: "js/[name].js"
    },
    module: {
        loaders: [
            { test: /.css$/,
              loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
            { test: /.json$/, loader: "json"},
            {test:  /.html$/, loader: "html"},
            { test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,
    loader: "url-loader?limit=50000&name=[path][name].[ext]"}
        ]
    },
    plugins: [
       new ExtractTextPlugin("css/[name].css"),
   ]
  }

因為webpack是基于node.js所有，采用的是common.js的寫法，common.js具體語法我在這里就不解釋了。

首先，webpack是需要定義輸入與輸出文件的，entry為輸入，output為輸出。

這個是輸入entry的上下文環境，__dirname代指整個項目路徑，即directory name。
我的項目結構中，開發目錄是src，所有在__dirname后面，加上路徑的 /src。

列出輸入的文件

  entry: {
    test:["./js/test.js","./js/test1.js"],
    test2:"./js/test2.js",
    },

entry有三種定義方式，第一個直接一個字符串路徑名，代表唯一一個輸入；第二個一個數組代表多個文件對應
一個輸出，第三種，如上寫，以字面對象量的方式，test，test2總共對應著3個輸入2個輸出。

output: {
    path: __dirname + "/prd",
    publicPath: "../",
    filename: "js/[name].js"
},

path和entry的一樣。代表所有文件輸出時的前綴路徑。

這里要加重了
publicPath: "../",
這個屬性一直沒重視，認為這個和path應該是一樣一樣的，為何還要多設置一個，所有一開始，我是只設置了path，并沒有設置publicPath的。那么這里為什么設置了publicPath: "../",呢。

我們通過一個例子來說明原因。

div {
    background-image: url(../images/test/icon.jpg);
}  //我在src目錄下的css文件夾中的index.css中設置背景圖片

require(../images/icon.png) //我在src目錄下的js文件的index.js中引入圖片
var img = require("../images/test/icon.jpg");
document.getElementById("image").setAttribute("src", img);

  //prd下的html文件夾中的indexhtml代碼

  
    
    
    
  
  
    

      test
    



  

如上所述，我用css與js兩種方式引入圖片。
只是在src中的話，那樣是沒有問題的，但要是在prd中，因為prd為打包后文件。對于這些地址的處理，是沒有太多介紹的，所有只能一個個試。如果我不加publicPath: "../",的話，那么這些圖片對應的路徑

__dirname/prd/css/images/test/icon.png  /第一種
__dirname/prd/html/images/test/icon.png//第二種
__dirname/prd/images/test/icon.png //正確路徑

所以問題出在了webpack打包的時候，處理地址的時候會將前面"../"給消除了，所有你再到chrome里看他是他的地址是 images/test/icon.jpg，沒有前面哪個../,當然了，我的研究也暫時只到這里，你能夠通過public設置../來達到目的。而我之所以把html放入prd中，而不是直接在項目目錄下，也是因為這個～放在項目目錄下，這個publicPath路徑就沒法統一了，所有只能先折中一下，將html也放入prd中。
這樣上述的圖片就應該正常顯示了。
但是這樣的話，也就達不到我想做的前后端完全分離的效果了，所有，這里先留下一筆，折騰了一天，還沒找到解決方案。

filename: "js/[name].js"

這個是設置輸出路徑在緊接著前面path與publicPath兩個深一層的 設置，這個對應著entry的輸入文件，name就是entry對象里的鍵值名，即test，test2。

大體上module里面，我暫時用到的只有loaders，所有這里只講解loaders。

module: {
    loaders: [
        { test: /.css$/,
          loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
        { test: /.json$/, loader: "json"},
        {test:  /.html$/, loader: "html"},
        { test: /.(gif|jpg|png|woff|svg|eot|ttf)??.*$/,
loader: "url-loader?limit=50000&name=[path][name].[ext]"}
    ]
},

loaders是一個數組，數組里是對每種文件的打包處理。因為webpack本身只支持js打包的處理，所有我們要是想把css，json，html，圖片一起打包了，就得另外下各種各樣的加載器了。
簡單說下用法，在我們的entry的入口js文件中，require(../images/icon.png)既可以引入一個png格式的文件，此時，webpack打包時，會檢測require的文件，并采用對應的規則去解析，如果你沒有對應的加載器就會報錯，這里我們引入了url-loader，所以他會正確解析打包。

(url-loader用法，url-loader?這里的？表示query查詢的意思，后面跟的是規則，當文件大小小于50kb的時候，采用base64格式，如果大于50kb則采用鏈接)

不得不說，大部分加載器的說明文檔還是太簡單了，寥寥幾句，暫時還不知道如何高度的定制化需求。list of loaders

test
test中對應的是一個正則表達式，沒有什么好說的，不知道的可以找相關的文檔看看，也可以點我這篇博客看看正則表達小結與小知識點集錦

loader
loader對應的就是，匹配該規則時指定的加載器，比如匹配到json文件時，采用“json”加載器，全稱是"json-loader"，當然簡稱也沒有問題。至于css中那個是一個額外的插件，表示匹配到css時采用這個插件，至于插件的聲明與用法，請看下面的參數。

plugins: [
   new ExtractTextPlugin("css/[name].css"),
]

plugins 是插件的聲明與用法，首先用new實例化一個插件，參數是一個地址規則的字符串，
表示把require的css文件輸出的地址。
插件也有許多，想要高度定制需求，肯定是要結合插件與加載器的。list of plugin

使用的時候，直接到項目目錄下，使用webpack就會自動執行。
當然，輸入webpack -w 每次更改后會自動執行。
另外webpack提供node.js的服務器供調試。
滿復雜的文檔，看花了。webpack-dev-server

安裝

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

執行

webpack-dev-server
好了，使用的時候，還有許多其他的小細節，可以去探索 。
當然大部分時候有這些也足夠了。感興趣的可以繼續去探索

其實，如果不喜歡折騰也可以來嘗試一下fekit，學習成本較低，并且非常強大。
前端構建工具fekit
文中有什么紕漏，歡迎大家指出～