WebPack是什么
- 一個(gè)打包工具
- 一個(gè)模塊加載工具
- 各種資源都可以當(dāng)成模塊來處理
- 網(wǎng)站 http://webpack.github.io/
如今，越來越多的JavaScript代碼被使用在頁面上躁绸，我們添加很多的內(nèi)容在瀏覽器里。如何去很好的組織這些代碼净刮，成為了一個(gè)必須要解決的難題。
對(duì)于模塊的組織淹父，通常有如下幾種方法：
- 通過書寫在不同文件中，使用script標(biāo)簽進(jìn)行加載
- CommonJS進(jìn)行加載（NodeJS就使用這種方式）
- AMD進(jìn)行加載（require.js使用這種方式）
- ES6模塊
思考：為什么只有JS需要被模塊化管理困介，前臺(tái)的很多預(yù)編譯內(nèi)容，不需要管理嗎座哩？
基于以上的思考粮彤，WebPack項(xiàng)目有如下幾個(gè)目標(biāo)：
- 將依賴樹拆分，保證按需加載
- 保證初始加載的速度
- 所有靜態(tài)資源可以被模塊化
- 可以整合第三方的庫和模塊
- 可以構(gòu)造大系統(tǒng)
從下圖可以比較清晰的看出WebPack的功能
這是一個(gè)示意圖
WebPack的特點(diǎn)
- 豐富的插件屿良，方便進(jìn)行開發(fā)工作
- 大量的加載器，包括加載各種靜態(tài)資源
- 代碼分割尘惧，提供按需加載的能力
- 發(fā)布工具
WebPack的優(yōu)勢(shì)
- webpack 是以 commonJS 的形式來書寫腳本滴递递，但對(duì) AMD/CMD 的支持也很全面啥么，方便舊項(xiàng)目進(jìn)行代碼遷移贰逾。
- 能被模塊化的不僅僅是 JS 了。
- 開發(fā)便捷似踱，能替代部分 grunt/gulp 的工作，比如打包核芽、壓縮混淆、圖片轉(zhuǎn)base64等轧简。
- 擴(kuò)展性強(qiáng)，插件機(jī)制完善拳芙，特別是支持 React 熱插拔（見 react-hot-loader ）的功能讓人眼前一亮。
WebPack的安裝
- 安裝命令
$ npm install webpack -g
- 使用webpack
$ npm init # 會(huì)自動(dòng)生成一個(gè)package.json文件
$ npm install webpack --save-dev #將webpack增加到package.json文件中
- 可以使用不同的版本
$ npm install webpack@1.2.x --save-dev
- 如果想要安裝開發(fā)工具
$ npm install webpack-dev-server --save-dev
WebPack的配置
每個(gè)項(xiàng)目下都必須配置有一個(gè) webpack.config.js 舟扎，它的作用如同常規(guī)的 gulpfile.js/Gruntfile.js 悴务，就是一個(gè)配置項(xiàng)，告訴 webpack 它需要做什么讯檐。
下面是一個(gè)例子
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//插件項(xiàng)
plugins: [commonsPlugin],
//頁面入口文件配置
entry: {
index : './src/js/page/index.js'
},
//入口文件輸出配置
output: {
path: 'dist/js/page',
filename: '[name].js'
},
module: {
//加載器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
},
//其它解決方案配置
resolve: {
//查找module的話從這里開始查找
root: 'E:/github/flux-example/src', //絕對(duì)路徑
//自動(dòng)擴(kuò)展文件后綴名，意味著我們r(jià)equire模塊可以省略不寫后綴名
extensions: ['', '.js', '.json', '.scss'],
//模塊別名定義叨恨，方便后續(xù)直接引用別名挖垛，無須多寫長長的地址
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};
- plugins 是插件項(xiàng)，這里我們使用了一個(gè) CommonsChunkPlugin的插件晕换，它用于提取多個(gè)入口文件的公共腳本部分站宗，然后生成一個(gè) common.js 來方便多頁面之間進(jìn)行復(fù)用。
- entry 是頁面入口文件配置梢灭，output 是對(duì)應(yīng)輸出項(xiàng)配置 （即入口文件最終要生成什么名字的文件蒸其、存放到哪里）
- module.loaders 是最關(guān)鍵的一塊配置库快。它告知 webpack 每一種文件都需要使用什么加載器來處理。 所有加載器需要使用npm來加載
- 最后是 resolve 配置义屏，配置查找模塊的路徑和擴(kuò)展名和別名（方便書寫）
WebPack開始使用
這里有最基本的使用方法，給大家一個(gè)感性的認(rèn)識(shí)
- 正確安裝了WebPack蝶怔，方法可以參考上面
- 書寫entry.js文件
document.write("看看如何讓它工作！");
- 書寫index.html文件
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
- 執(zhí)行命令踢星，生成bundle.js文件
$ webpack ./entry.js bundle.js
- 在瀏覽器中打開index.html文件隙咸，可以正常顯示出預(yù)期
- 增加一個(gè)content.js文件
module.exports = "現(xiàn)在的內(nèi)容是來自于content.js文件！";
- 修改entry.js文件
document.write(require("./content.js"));
- 執(zhí)行第四步的命令
進(jìn)行加載器試驗(yàn)
- 增加style.css文件
body {
background: yellow;
}
- 修改entry.js文件
require("!style-loader!css-loader!./style.css");
document.write(require("./content.js"));
- 執(zhí)行命令藏否，安裝加載器
$ npm install css-loader style-loader # 安裝的時(shí)候不使用 -g
- 執(zhí)行webpack命令，運(yùn)行看效果
- 可以在命令行中使用loader
$ webpack ./entry.js bundle.js --module-bind "css=style-loader!css-loader"
使用配置文件
默認(rèn)的配置文件為webpack.config.js
- 增加webpack.config.js文件
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
- 執(zhí)行程序
$ webpack
發(fā)布服務(wù)器
- 安裝服務(wù)器
$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors
- 服務(wù)器可以自動(dòng)生成和刷新秕岛，修改代碼保存后自動(dòng)更新畫面
http://localhost:8080/webpack-dev-server/bundle
WebPack常用命令
$ webpack --display-error-details
后面的參數(shù)“--display-error-details”是推薦加上的误证，方便出錯(cuò)時(shí)能查閱更詳盡的信息（比如 webpack 尋找模塊的過程），從而更好定位到問題遏考。
$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）來打包
$ webpack --watch //監(jiān)聽變動(dòng)并自動(dòng)打包
$ webpack -p //壓縮混淆腳本，這個(gè)非常非常重要灌具！
$ webpack -d //生成map映射文件，告知哪些模塊被最終打包到哪里了
