隨著前端技術(shù)的發(fā)展，前端開發(fā)從靜態(tài)網(wǎng)頁的開發(fā)到復(fù)雜的前后端交互再到基于node.js的全棧開發(fā)，前端需要做的事情越來也多，前端代碼的邏輯和交互效果越來越復(fù)雜，越來越不易于管理。模塊化開發(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ā)中越來越重要。

　　現(xiàn)在三大前端框架vue、react、Angular 三分天下，各種基于三大框架的插件層出不窮。前端項(xiàng)目開發(fā)和維護(hù)越來越離不開自動(dòng)化構(gòu)建工具。webpack成為了前端項(xiàng)目構(gòu)建工具的首選，在grunt、glup、browserify等已經(jīng)相當(dāng)火了之后，webpack長江后浪推前浪，把前輩們拍死在沙灘上，實(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。

　　簡單的說Webpack就是一個(gè)代碼管理工具，可以將所有資源(包括Javascript，圖像，字體和CSS等)打包后置于依賴關(guān)系中，使你可以按照需求引用依賴來使用資源。

為什么要使用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)勁的事情?，F(xiàn)在我們可以從 Webpack 中收益，它將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。我們就不需要在大量的資源中浪費(fèi)太多的精力。

　　.靜態(tài)資源處理(性能優(yōu)化)：Webpack可以通過loader或者插件來對(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í)再把需要的資源異步加載過來，這樣做在大型項(xiàng)目中很常見。

 

　　提升工作效率：Webpack 有一系列的輔助開發(fā)工具來提高我們的開發(fā)效率。本地服務(wù)中的熱加載、less,sass的使用、開發(fā)環(huán)境到生產(chǎn)環(huán)境的自定義配置等。

Webpack和它前輩們的區(qū)別

　　Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優(yōu)點(diǎn)使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。

　　Gulp是基于流的自動(dòng)化構(gòu)建工具，而數(shù)據(jù)流主要分為讀取流、寫入流和雙工流，就是說gulp通過一個(gè)一個(gè)task任務(wù),對(duì)代碼進(jìn)行讀取、加工(比如：壓縮、合并、生成圖片sprite等)、輸出。

　　Webpacks是把你的工程代碼全部整合起來，給你打包成不同的模塊，提供給你一個(gè)主模塊，同過這個(gè)主模塊來找到你項(xiàng)目所依賴的文件，使用loaders處理它們，后打包為一個(gè)(或多個(gè))瀏覽器可識(shí)別的JavaScript文件。

Webpack 核心概念

　　入口起點(diǎn)(Entry Points)：項(xiàng)目提供一個(gè)入口文件，通過這個(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ù)的來源，然后返回新的資源文件。例如把es6轉(zhuǎn)換為es5，scss轉(zhuǎn)換為css。

　　插件(Plugins)：插件是 wepback 的支柱功能。在你使用 webpack 配置時(shí)，webpack 自身也構(gòu)建于同樣的插件系統(tǒng)上!插件目的在于解決 loader 無法實(shí)現(xiàn)的其他事。

　　Webpack 簡單使用

　　在開始之前，請(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也一并安裝好了。同樣可以通過輸入 "npm -v" 來測試是否成功安裝。命令如下，出現(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 模板頁面

　　├─css

　　│ app.css

　　├─images

　　└─js

　　main.js webpack入口文件

　　B)webpack 配置文件

　　// 1. 引入Path模塊處理路徑問題

　　var path = require('path');

　　// 2. 引用自動(dòng)生成HTML頁面的模塊

　　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)，通過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'), // 指定模板頁面

　　filename: 'index.html' // 指定在內(nèi)存中生成的頁面的名稱

　　}),

　　new webpack.HotModuleReplacementPlugin() // 使用webpack下面的.HotModuleReplacementPlugin()實(shí)現(xiàn)熱更新

　　]

　　}

　　上面配置文件是對(duì)webpack的簡單使用，webpack可以幫助我們做更多的事，完成更復(fù)雜的功能，但是webpack的配置也是繁瑣的，這就需要我們不斷的去學(xué)習(xí)實(shí)踐。