摘要：添加依賴到如何使用依賴當(dāng)你再興建一個(gè)文件的時(shí)候，就不需要一個(gè)個(gè)插件安裝了，將文件復(fù)制到當(dāng)前文件下，并輸入，即通過里的依賴關(guān)系，自動(dòng)把依賴安裝好了。第四步新建配置文件默認(rèn)的配置文件在項(xiàng)目目錄下為。

WilsonLiu"s blog 首發(fā)地址

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

+html
+src
+prd
+fekit-module

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

npm install webpack -g

npm init

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

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

如何使用依賴？

當(dāng)你再興建一個(gè)文件的時(shí)候，就不需要一個(gè)個(gè)插件安裝了，將package.json文件復(fù)制到當(dāng)前文件下，并輸入npm install，即通過package.json里的依賴關(guān)系，自動(dòng)把依賴安裝好了。當(dāng)然，其他文件結(jié)構(gòu)還是要自己新建。
這里提供一下我的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"
    }
  }

默認(rèn)的配置文件在項(xiàng)目目錄下為 webpack.config.js。 簡(jiǎn)單的操作可以參看下面這個(gè)文檔。 《Webpack 中文指南》

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

參數(shù)真的是非常多，一個(gè)個(gè)把認(rèn)為會(huì)用到的敲過去，調(diào)了調(diào)，試了試。

接下來，本文，根據(jù)自己的學(xué)習(xí)歷程，講下我用到的重要部分，首先貼一下，項(xiàng)目結(jié)構(gòu)，和配置文檔。

-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"),
   ]
  }

因?yàn)閣ebpack是基于node.js所有，采用的是common.js的寫法，common.js具體語法我在這里就不解釋了。

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

這個(gè)是輸入entry的上下文環(huán)境，__dirname代指整個(gè)項(xiàng)目路徑，即directory name。
我的項(xiàng)目結(jié)構(gòu)中，開發(fā)目錄是src，所有在__dirname后面，加上路徑的 /src。

列出輸入的文件

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

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

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

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

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

我們通過一個(gè)例子來說明原因。

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

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中，因?yàn)閜rd為打包后文件。對(duì)于這些地址的處理，是沒有太多介紹的，所有只能一個(gè)個(gè)試。如果我不加publicPath: "../",的話，那么這些圖片對(duì)應(yīng)的路徑

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

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

filename: "js/[name].js"

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

大體上module里面，我暫時(shí)用到的只有l(wèi)oaders，所有這里只講解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是一個(gè)數(shù)組，數(shù)組里是對(duì)每種文件的打包處理。因?yàn)閣ebpack本身只支持js打包的處理，所有我們要是想把css，json，html，圖片一起打包了，就得另外下各種各樣的加載器了。
簡(jiǎn)單說下用法，在我們的entry的入口js文件中，require(../images/icon.png)既可以引入一個(gè)png格式的文件，此時(shí)，webpack打包時(shí)，會(huì)檢測(cè)require的文件，并采用對(duì)應(yīng)的規(guī)則去解析，如果你沒有對(duì)應(yīng)的加載器就會(huì)報(bào)錯(cuò)，這里我們引入了url-loader，所以他會(huì)正確解析打包。

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

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

test
test中對(duì)應(yīng)的是一個(gè)正則表達(dá)式，沒有什么好說的，不知道的可以找相關(guān)的文檔看看，也可以點(diǎn)我這篇博客看看正則表達(dá)小結(jié)與小知識(shí)點(diǎn)集錦

loader
loader對(duì)應(yīng)的就是，匹配該規(guī)則時(shí)指定的加載器，比如匹配到j(luò)son文件時(shí)，采用“json”加載器，全稱是"json-loader"，當(dāng)然簡(jiǎn)稱也沒有問題。至于css中那個(gè)是一個(gè)額外的插件，表示匹配到css時(shí)采用這個(gè)插件，至于插件的聲明與用法，請(qǐng)看下面的參數(shù)。

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

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

使用的時(shí)候，直接到項(xiàng)目目錄下，使用webpack就會(huì)自動(dòng)執(zhí)行。
當(dāng)然，輸入webpack -w 每次更改后會(huì)自動(dòng)執(zhí)行。
另外webpack提供node.js的服務(wù)器供調(diào)試。
滿復(fù)雜的文檔，看花了。webpack-dev-server

安裝

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

執(zhí)行

webpack-dev-server
好了，使用的時(shí)候，還有許多其他的小細(xì)節(jié)，可以去探索 。
當(dāng)然大部分時(shí)候有這些也足夠了。感興趣的可以繼續(xù)去探索

其實(shí)，如果不喜歡折騰也可以來嘗試一下fekit，學(xué)習(xí)成本較低，并且非常強(qiáng)大。
前端構(gòu)建工具fekit
文中有什么紕漏，歡迎大家指出～