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