Paste_Image.png

webpack的優(yōu)點(diǎn)

代碼拆分

webpack有兩種組織代碼的方式 一種是同步一種是異步。異步依賴作為分割點(diǎn)，形成一個(gè)新的塊。在優(yōu)化過了依賴樹后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。

loader

webpack 本身只處理原生的js,但是loader轉(zhuǎn)化器可以將各種資源轉(zhuǎn)換成為js模塊。這樣任何資源都可以成為 webpack的處理對(duì)象。比如處理css的cssloader,處理coffeescript coffeesecriptloader。

智能解析

webpack是一個(gè)智能解析器，可以處理幾乎任何第三方的庫，無論他們的模塊形式是commonjs，amd 還是普通的js文件。甚至加載依賴的時(shí)候可以動(dòng)態(tài)表達(dá)式

require("./templates/" + name + ".jade")

插件系統(tǒng)

webpack有豐富的插件系統(tǒng)。大多數(shù)的功能都可以通過這個(gè)插件系統(tǒng)運(yùn)行。還可以開發(fā)和使用開源的webpack的插件，來滿足各式各樣的需求。

安裝

首先要安裝 Node.js， Node.js 自帶了軟件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建議使用最新版 Node.js。
用 npm 安裝 Webpack：

$ npm install webpack -g

此時(shí) Webpack 已經(jīng)安裝到了全局環(huán)境下，可以通過命令行 webpack -h
試試。

通常我們會(huì)將 Webpack 安裝到項(xiàng)目的依賴中，這樣就可以使用項(xiàng)目本地版本的 Webpack。

進(jìn)入項(xiàng)目目錄,確定已經(jīng)有 package.json，沒有就通過 npm init 創(chuàng)建安裝 webpack 依賴

npm install webpack --save-dev

Webpack 目前有兩個(gè)主版本，一個(gè)是在 master 主干的穩(wěn)定版，一個(gè)是在 webpack-2 分支的測試版，測試版擁有一些實(shí)驗(yàn)性功能并且和穩(wěn)定版不兼容，在正式項(xiàng)目中應(yīng)該使用穩(wěn)定版。
查看 webpack 版本信息

$ npm info webpack

如果需要使用 Webpack 開發(fā)工具，要單獨(dú)安裝：

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

loader

webpack本身只處理javascript, 如果要處理其他的類型要引用不同的loader。

1.loader可以以管道的方式連接
2.同步或者異步執(zhí)行
3.接受參數(shù)
4.運(yùn)行在nodejs的環(huán)境中，所以可以做任何的事情
5.loader可以通過文件擴(kuò)展名（或正則表達(dá)式）綁定給不同的文件
6.loader通過npm安裝
7.loader可以訪問配置
8.可以require引用模塊的時(shí)候使用，也可以在webpack的全局配置中指定，還可以通過命令行來執(zhí)行。
9.插件可以使loader具有更多的屬性

通過require來使用loader
例如引用一個(gè)css文件

/*style.css*/
body {
  background: #fef;
}

require('style!css! ./style.css');//載入css文件

安裝loader

npm install css-loader style-loader

通過命令行來指定配置

webpack entry.js bundle.js --module-bind 'css=style!css'

webpack配置文件

var webpack = require('webpack')
module.exports = { 
    entry: './entry.js',
   output: { path: __dirname, filename: 'bundle.js' },
   module: { 
        loaders: [ {test: /\.css$/, loader: 'style!css'} 
      ] 
   }
}

默認(rèn)webpack.config.js

這樣就直接執(zhí)行webpack就好了，css文件就直接調(diào)用好了

require('./style.css');

plugin

插件可以完成更多l(xiāng)oader不可以實(shí)現(xiàn)的功能。

webpack內(nèi)置了很多的插件，這里我們利用webpack的BannerPlugin,這個(gè)插件的作用是給輸出文件添加注釋頭。
具體配置如下：

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  }，
module: {
  loaders: [
    {test: /\.css$/, loader: 'style!css'}
  ]
},
plugins: [
  new webpack.BannerPlugin('這是一個(gè)注釋頭')
]
}

webpack的開發(fā)環(huán)境

當(dāng)項(xiàng)目逐漸變大了，webpack的時(shí)間會(huì)越來越長，通過參數(shù)可以讓編譯的內(nèi)容帶顏色和進(jìn)度。

webpack --progress --colors

每次修改都需要編譯，可以開啟監(jiān)聽模式，那么每次更改自動(dòng)更新。

webpack --progress --colors --watch

當(dāng)然，使用 webpack-dev-server
開發(fā)服務(wù)是一個(gè)更好的選擇。它將在 localhost:8080 啟動(dòng)一個(gè) express 靜態(tài)資源 web 服務(wù)器，并且會(huì)以監(jiān)聽模式自動(dòng)運(yùn)行 webpack，在瀏覽器打開 http://localhost:8080/ 或http://localhost:8080/webpack-dev-server/ 可以瀏覽項(xiàng)目中的頁面和編譯后的資源輸出，并且通過一個(gè) socket.io 服務(wù)實(shí)時(shí)監(jiān)聽它們的變化并自動(dòng)刷新頁面。

npm install webpack-dev-server -g 

運(yùn)行

 webpack-dev-server --progress --colors