前面的話
在webpack出現(xiàn)之前，市面上已經(jīng)存在的模塊管理和打包工具并不適合大型的項(xiàng)目，尤其單頁面 Web 應(yīng)用程序。最緊迫的原因是如何在一個(gè)大規(guī)模的代碼庫中，維護(hù)各種模塊資源的分割和存放，維護(hù)它們之間的依賴關(guān)系，并且無縫的將它們整合到一起生成適合瀏覽器端請(qǐng)求加載的靜態(tài)資源。webpack是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進(jìn)行代碼分隔，等到實(shí)際需要的時(shí)候再異步加載
webpack的內(nèi)容豐富且雜亂，對(duì)于新手并不友好。本文以一個(gè)實(shí)例的形式，對(duì)webpack的重要概念進(jìn)行介紹，并著重說明如何使用webpack
概述
webpack是一個(gè)模塊打包器。
【特點(diǎn)】
webpack有以下特點(diǎn)
代碼拆分
webpack 有兩種組織模塊依賴的方式，同步和異步。異步依賴作為分割點(diǎn)，形成一個(gè)新的塊。在優(yōu)化了依賴樹后，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包。
Loader
Webpack 本身只能處理原生的 JavaScript 模塊，但是 loader 轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成 JavaScript 模塊。這樣，任何資源都可以成為 Webpack 可以處理的模塊。
智能解析
Webpack 有一個(gè)智能解析器，幾乎可以處理任何第三方庫，無論它們的模塊形式是 CommonJS、 AMD 還是普通的 JS 文件。甚至在加載依賴的時(shí)候，允許使用動(dòng)態(tài)表達(dá)式 require("./templates/" + name + ".jade")。
插件系統(tǒng)
Webpack 還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的，還可以開發(fā)和使用開源的 Webpack 插件，來滿足各式各樣的需求。
快速運(yùn)行
Webpack 使用異步 I/O 和多級(jí)緩存提高運(yùn)行效率，這使得 Webpack 能夠以令人難以置信的速度快速增量編譯
【安裝】
用 npm 安裝 Webpack
$ npm install webpack
一個(gè)常見的問題是：安裝webpack后，無法使用webpack命令
這是因?yàn)橹贿M(jìn)行了本地安裝，沒有全局安裝，輸入如下代碼進(jìn)行全局安裝后即可運(yùn)行
$ npm install webpack -g
使用
首先創(chuàng)建一個(gè)靜態(tài)頁面index.html和一個(gè)JS入口文件entry.js
<!-- index.html --> <html> <head> <meta charset="utf-8"> </head> <body> <script src="bundle.js"></script> </body> </html>
// entry.jsdocument.write('It works.')然后編譯 entry.js 并打包到 bundle.js：
$ webpack entry.js bundle.js
打包過程會(huì)顯示日志：
Hash: f47511e706e3de8f2417
Version: webpack 2.6.1Time: 47ms
Asset Size Chunks Chunk Names
bundle.js 2.66 kB 0 [emitted] main
[0] ./entry.js 27 bytes {0} [built]
用瀏覽器打開 index.html 將會(huì)看到 It works.
接下來添加一個(gè)模塊 module.js 并修改入口 entry.js：
// module.jsmodule.exports = 'It works from module.js.'
// entry.jsdocument.write('It works.')
document.write(require('./module.js')) // 添加模塊 重新打包 webpack entry.js bundle.js 后刷新頁面看到變化 It works.It works from module.js.
Hash: 09733456f2c5b24a4845
Version: webpack 2.6.1Time: 61ms
Asset Size Chunks Chunk Names
bundle.js 2.83 kB 0 [emitted] main
[0] ./module.js 43 bytes {0} [built]
[1] ./entry.js 75 bytes {0} [built]
Webpack會(huì)分析入口文件，解析包含依賴關(guān)系的各個(gè)文件。這些文件（模塊）都打包到 bundle.js 。Webpack 會(huì)給每個(gè)模塊分配一個(gè)唯一的 id 并通過這個(gè) id 索引和訪問模塊。在頁面啟動(dòng)時(shí)，會(huì)先執(zhí)行 entry.js 中的代碼，其它模塊會(huì)在運(yùn)行 require 的時(shí)候再執(zhí)行
Loader
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。
Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個(gè)函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。詳細(xì)信息移步至此
接上面的例子，我們要在頁面中引入一個(gè)CSS文件style.css，要使用require("!style-loader!css-loader!./style.css")代碼，代碼讀取順序從右向左，表示首頁將 style.css 也看成是一個(gè)模塊，先加載style.css，然后用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中
/* style.css */body { background: yellow; }修改 entry.js：
require("style-loader!css-loader!./style.css")
document.write('It works.')
document.write(require('./module.js'))安裝 loader：
npm install css-loader style-loader
重新編譯打包，刷新頁面，就可以看到黃色的頁面背景了
如果每次 require CSS 文件的時(shí)候都要寫 loader 前綴，是一件很繁瑣的事情。我們可以根據(jù)模塊類型（擴(kuò)展名）來自動(dòng)綁定需要的 loader。
將 entry.js 中的 require("!style-loader!css-loader!./style.css") 修改為 require("./style.css") ，然后執(zhí)行
$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'
顯然，這兩種使用 loader 的方式，效果是一樣的
配置
Webpack 在執(zhí)行的時(shí)候，除了在命令行傳入?yún)?shù)，還可以通過指定的配置文件來執(zhí)行。默認(rèn)情況下，會(huì)搜索當(dāng)前目錄的 webpack.config.js 文件，這個(gè)文件是一個(gè) node.js 模塊，返回一個(gè) json 格式的配置信息對(duì)象，或者通過 --config選項(xiàng)來指定配置文件。
繼續(xù)我們的案例，在根目錄創(chuàng)建 package.json 來添加 webpack 需要的依賴：
{ "name": "project", "version": "1.0.0", "devDependencies": { "css-loader": "^0.28.4", "style-loader": "^0.18.2", "webpack": "^2.6.1"
}
}
別忘了運(yùn)行 npm install。然后創(chuàng)建一個(gè)配置文件 webpack.config.js，在下面的配置中，對(duì)一個(gè)單獨(dú)的module對(duì)象定義了rules屬性，里面包含兩個(gè)必須屬性：test和use。相當(dāng)于告訴webpack compiler，碰到「在require()/import語句中被解析為'.css'的路徑」時(shí)，在把它們添加并打包之前，要先使用css-loader后使用style-loader去轉(zhuǎn)換
var webpack = require('webpack');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路徑
filename: 'bundle.js'//出口名稱 },
module: {
rules: [
{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
]
}
}
同時(shí)簡(jiǎn)化 entry.js 中的 style.css 加載方式：
require('./style.css'); 最后運(yùn)行 webpack，可以看到 webpack 通過配置文件執(zhí)行的結(jié)果和上一節(jié)通過命令行 webpack entry.js bundle.js --module-bind 'css=style!css' 執(zhí)行的結(jié)果是一樣的
如果配置文件并不叫做默認(rèn)的webpack.config.js，而是其他的名稱，如test.js，則需要設(shè)置如下命令進(jìn)行打包
webpack --config test.js
插件
插件可以完成更多 loader 不能完成的功能。插件的使用一般是在 webpack 的配置信息 plugins 選項(xiàng)中指定。Webpack 本身內(nèi)置了一些常用的插件，還可以通過 npm 安裝第三方插件。詳細(xì)信息移步至此
想要使用一個(gè)插件，只需要require()它，然后把它添加到plugins數(shù)組中。內(nèi)置插件則不需要require，直接使用即可
接下來，我們利用一個(gè)最簡(jiǎn)單的 BannerPlugin 內(nèi)置插件來實(shí)踐插件的配置和運(yùn)行，這個(gè)插件的作用是給輸出的文件頭部添加注釋信息。
修改 webpack.config.js，添加 plugins：
var webpack = require('webpack');
module.exports = {
entry: './entry.js', //入口文件 output: {
path: __dirname,//出口路徑
filename: 'bundle.js'//出口名稱 },
module: {
rules: [
{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}
]
},
plugins: [ new webpack.BannerPlugin('This file is created by xiaohuochai')
]
}
然后運(yùn)行 webpack，打開 bundle.js，可以看到文件頭部出現(xiàn)了我們指定的注釋信息：
/*! This file is created by xiaohuochai *//******/ (function(modules) { // webpackBootstrap/******/ // The module cache/******/ var installedModules = {};// 后面代碼省略
開發(fā)環(huán)境
當(dāng)項(xiàng)目逐漸變大，webpack 的編譯時(shí)間會(huì)變長(zhǎng)，可以通過參數(shù)讓編譯的輸出內(nèi)容帶有進(jìn)度和顏色
$ webpack --progress --colors
如果不想每次修改模塊后都重新編譯，那么可以啟動(dòng)監(jiān)聽模式。開啟監(jiān)聽模式后，沒有變化的模塊會(huì)在編譯后緩存到內(nèi)存中，而不會(huì)每次都被重新編譯，所以監(jiān)聽模式的整體速度是很快的
$ webpack --progress --colors --watch
比如，執(zhí)行以上命令后，修改'style.css'的body的背景顏色為紅色，不用重新編譯，刷新頁面后，頁面即發(fā)生改變
當(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
比如，執(zhí)行以上命令后，修改'style.css'的body的背景顏色為藍(lán)色，不用重新編譯，也不用刷新頁面，頁面即發(fā)生改變
http://www.cnblogs.com/xiaohuochai/p/7003258.html
延伸閱讀
- webpack入門 2017-06-27
- webpack入門與解析(一) 2017-02-21
- webpack入門必知必會(huì) 2017-01-16
- Webpack 入門指南 - 1.安裝 2016-10-28
- Webpack 入門指南 - 3. Hello, Angular2! 2016-10-26
- Webpack 入門指南 - 3. Hello, Angular2! 2016-10-26
- Webpack 入門指南 - 2.模塊 2016-10-26
- Webpack 入門指南 - 1.安裝 2016-10-26
- Webpack 入門指南 - 2.模塊 2016-10-25
webpack入門與解析(一)