當(dāng)前位置：隨著前端技術(shù)的發(fā)展，前端開發(fā)從靜態(tài)網(wǎng)頁(yè)的開發(fā)到復(fù)雜的前后端交互再到基于node.js的全棧開發(fā)，前端需要做的事情越來(lái)也多，前端代碼的邏輯和交互效果越來(lái)越復(fù)雜，越來(lái)越不易于管理。模塊化開發(fā)和預(yù)處理框架把項(xiàng)目分成若干個(gè)小模塊，增加了后發(fā)布的困難，沒有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，讓前端的項(xiàng)目結(jié)構(gòu)千奇百怪。前端自動(dòng)化構(gòu)建在整個(gè)項(xiàng)目開發(fā)中越來(lái)越重要。
現(xiàn)在三大前端框架vue、react、Angular 三分天下，各種基于三大框架的插件層出不窮。前端項(xiàng)目開發(fā)和維護(hù)越來(lái)越離不開自動(dòng)化構(gòu)建工具。webpack成為了前端項(xiàng)目構(gòu)建工具的首選，在grunt、glup、browserify等已經(jīng)相當(dāng)火了之后，webpack長(zhǎng)江后浪推前浪，把前輩們拍死在沙灘上，實(shí)力驚人。
什么是webpack
webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle。
簡(jiǎn)單的說(shuō)Webpack就是一個(gè)代碼管理工具，可以將所有資源(包括Javascript，圖像，字體和CSS等)打包后置于依賴關(guān)系中，使你可以按照需求引用依賴來(lái)使用資源。
為什么要使用webpack
主要分為三個(gè)方向：1.維護(hù)模塊之間依賴 2.靜態(tài)資源處理(性能優(yōu)化)3.提升工作效率。
維護(hù)模塊之間依賴：一個(gè)稍微有點(diǎn)規(guī)模的應(yīng)用往往有著一個(gè)復(fù)雜的資源關(guān)系網(wǎng)，在維護(hù)項(xiàng)目時(shí)是一件費(fèi)時(shí)、費(fèi)力、費(fèi)勁的事情。現(xiàn)在我們可以從 Webpack 中收益，它將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。我們就不需要在大量的資源中浪費(fèi)太多的精力。
.靜態(tài)資源處理(性能優(yōu)化)：Webpack可以通過(guò)loader或者插件來(lái)對(duì)我們的靜態(tài)資源進(jìn)行優(yōu)化，主要體現(xiàn)在對(duì)代碼壓縮，圖片壓縮，文件處理，css預(yù)處理等。
實(shí)現(xiàn)模塊化組件化按需加載。比如：一個(gè)移動(dòng)端項(xiàng)目我初始化就加載一個(gè)主要模塊，當(dāng)我進(jìn)行某些操作時(shí)再把需要的資源異步加載過(guò)來(lái)，這樣做在大型項(xiàng)目中很常見。
提升工作效率：Webpack 有一系列的輔助開發(fā)工具來(lái)提高我們的開發(fā)效率。本地服務(wù)中的熱加載、less,sass的使用、開發(fā)環(huán)境到生產(chǎn)環(huán)境的自定義配置等。
Webpack和它前輩們的區(qū)別
Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack是一種模塊化的解決方案，不過(guò)Webpack的優(yōu)點(diǎn)使得Webpack在很多場(chǎng)景下可以替代Gulp/Grunt類的工具。
Gulp是基于流的自動(dòng)化構(gòu)建工具，而數(shù)據(jù)流主要分為讀取流、寫入流和雙工流，就是說(shuō)gulp通過(guò)一個(gè)一個(gè)task任務(wù),對(duì)代碼進(jìn)行讀取、加工(比如：壓縮、合并、生成圖片sprite等)、輸出。
Webpacks是把你的工程代碼全部整合起來(lái)，給你打包成不同的模塊，提供給你一個(gè)主模塊，同過(guò)這個(gè)主模塊來(lái)找到你項(xiàng)目所依賴的文件，使用loaders處理它們，后打包為一個(gè)(或多個(gè))瀏覽器可識(shí)別的JavaScript文件。
Webpack 核心概念
入口起點(diǎn)(Entry Points)：項(xiàng)目提供一個(gè)入口文件，通過(guò)這個(gè)入口文件執(zhí)行模塊化。
輸出(Output)：chunk多個(gè)文件組成的一個(gè)代碼塊，例如把一個(gè)可執(zhí)行模塊和它所有依賴的模塊組合和一個(gè) chunk 這體現(xiàn)了webpack的打包機(jī)制。
加載器(Loaders)：loader 是對(duì)應(yīng)用程序中資源文件進(jìn)行轉(zhuǎn)換。它們是(運(yùn)行在 Node.js 中的)函數(shù)，可以將資源文件作為參數(shù)的來(lái)源，然后返回新的資源文件。例如把es6轉(zhuǎn)換為es5，scss轉(zhuǎn)換為css。
插件(Plugins)：插件是 wepback 的支柱功能。在你使用 webpack 配置時(shí)，webpack 自身也構(gòu)建于同樣的插件系統(tǒng)上!插件目的在于解決 loader 無(wú)法實(shí)現(xiàn)的其他事。
Webpack 簡(jiǎn)單使用
在開始之前，請(qǐng)確保安裝了webapck 運(yùn)行的 Node.js 環(huán)境。推薦安裝node.js 6.0以上版本就行，如果版本太久，你可能遇到各種問題，因?yàn)樗鼈兛赡苋鄙?webpack 功能以及/或者缺少相關(guān) package 包。
1.安裝開發(fā)環(huán)境
a)安裝node.js
Node.js官網(wǎng)下載https://nodejs.org/zh-cn/download/ (已更新到8.10.0)
推薦6.0以上版本
安裝成功后 打開cmd 運(yùn)行 node -v 查看是否安裝成功 安裝成功會(huì)返回版本號(hào)
node -v
v6.11.2
b) npm
npm是nodejs的一個(gè)模塊化管理工具，nodejs已經(jīng)集成了npm，所以node.js 安裝完成之后npm也一并安裝好了。同樣可以通過(guò)輸入 "npm -v" 來(lái)測(cè)試是否成功安裝。命令如下，出現(xiàn)版本提示表示安裝成功
npm -v
3.10.10
2.安裝webpack
新建一個(gè)本地文件夾(此處命名webpack),在終端中(cmd)轉(zhuǎn)到該文件夾后執(zhí)行下述指令就可以完成安裝
A) 安裝webpack之前的準(zhǔn)備
首先在工程文件夾中 運(yùn)行 npm init 生成package.json文件
npm init 后回車默認(rèn)即可
package.json 文件中包含項(xiàng)目的信息和當(dāng)前項(xiàng)目開發(fā)環(huán)境、生產(chǎn)環(huán)境依賴的包
package.json文件中需要注意的三個(gè)參數(shù)：
"scripts" -> 我們可以在里面定義webpack 運(yùn)行命令
"devDependencies" ->項(xiàng)目開發(fā)環(huán)境中需要用的依賴包
"dependencies" ->生產(chǎn)環(huán)境需要用的依賴包
B)webpack 安裝
//全局安裝
npm install -g webpack
//安裝到你的項(xiàng)目目錄
npm install --save-dev webpack
到此我們的準(zhǔn)備工作已經(jīng)完成了。
3.配置文件
A)這是webpack demo 文件目錄
│ .babelrc 轉(zhuǎn)碼的規(guī)則和插件
│ package.json
│ webpack.config.js webpack配置文件
├─dist 編譯后的項(xiàng)目代碼
├─node_modules 存放依賴包(自動(dòng)生成)
└─src 開發(fā)目錄
│ index.html 模板頁(yè)面
├─css
│ app.css
├─images
└─js
main.js webpack入口文件
B)webpack 配置文件
// 1. 引入Path模塊處理路徑問題
var path = require('path');
// 2. 引用自動(dòng)生成HTML頁(yè)面的模塊
var htmlWebpackPlugin = require('html-webpack-plugin');
// 3. 導(dǎo)入webpack
var webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, 'src/js/main.js'), // 配置打包的入口文件
output: { // 指定輸出文件
path: path.resolve(__dirname, 'dist'), // 輸出文件的路徑
filename: 'bundle.js' // 輸出文件的名稱
},
module: { // 配置相關(guān)的loader模塊
rules: [ // 配置相關(guān)文件的匹配規(guī)則
{ test: /.css$/, use: ['style-loader', 'css-loader'] }, // 處理CSS文件的loader配置
{ test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },// 處理sass文件的loader配置
{ test: /.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=43959' }, // 處理URL路徑的loader
{test:/.js$/, use:'babel-loader', exclude:/node_modules/} // 重要的一點(diǎn)：要把node_modules文件夾，添加到排除項(xiàng)，通過(guò)exclude排除這個(gè)文件夾【注意：一定要排除否則會(huì)報(bào)錯(cuò)!!!】
]
},
devServer: { // 這里的配置項(xiàng)會(huì)交給webpack-dev-server去讀取
contentBase: path.resolve(__dirname, 'src'), // 配置啟動(dòng)路徑
open: true, // 自動(dòng)打開瀏覽器
port: 8080, // 指定端口號(hào)
hot: true // 啟用熱更新
},
plugins: [ // 插件數(shù)組
new htmlWebpackPlugin({ // 創(chuàng)建一個(gè)htmlWebpackPlugin插件
template: path.resolve(__dirname, 'src/index.html'), // 指定模板頁(yè)面
filename: 'index.html' // 指定在內(nèi)存中生成的頁(yè)面的名稱
}),
new webpack.HotModuleReplacementPlugin() // 使用webpack下面的.HotModuleReplacementPlugin()實(shí)現(xiàn)熱更新
]
}
上面配置文件是對(duì)webpack的簡(jiǎn)單使用，webpack可以幫助我們做更多的事，完成更復(fù)雜的功能，但是webpack的配置也是繁瑣的，這就需要我們不斷的去學(xué)習(xí)實(shí)踐。
