本文為飢人谷講師slashhuang原創文章，首發於 前端學習指南。
webpack技術入門
webpack基本已經成為前端專案的標配構建工具了。
然而，在一個前端團隊裡面，除了架構師之外，其他開發者很難有機會在工作中完整的實現整個配置流程。
本篇文章是我在公司裡面分享webpack及babel配置和外掛開發的一個細節版本，
希望能讓大家通過閱讀本文，比較好的梳理webpack工具。
webpack的出現解決了什麼問題
JavaScript自面世之後，就成為瀏覽器的標準指令碼語言。
然而JS本身並沒有提供python和java的package包、子模組的import等語法。
同時，前端程式碼還需要處理類似CSS、png、webfonts等非JS的檔案。
在前端工程化大潮下，一個既能處理JS又能處理別的資原始檔的載入器(bundler)亟待出現。
webpack就是這類解決方案中的傑出代表。
下面，我將按照如下的目錄結構對webpack使用進行講解。
1、webpack概述 2、一個簡單而通用的webpack配置檔案 3、webpack的配置檔案解讀 4、webpack常用的plugins及loader
1.webpack概述
webpack = module building system。
在webpack看來，所有的資原始檔都是模組(module),只是處理的方式不同。
上面兩句話就把webpack從top-level的角度講清楚了。
關於webpack的使用，其實和我們平時開發業務產品是一個道理。
產品需求 ===> 程式碼設計 ===> 提供API給開發者使用。
webpack解決的需求點就是如何更好的載入前端模組。
這裡我用了模組二字，是因為webpack從JS出發，將所有的檔案看做它要處理的模組。
webpack本身並不關心這個模組是什麼，它只是排程配置檔案中對模組處理的方式來完成這一切,而不必糾結檔案型別。
比如我們會在專案中使用ES6/7的語法來編寫JS程式碼,
於是我們只需要配置babel-loader即可處理這種JS。
比如我們需要載入html檔案獲取html字串,
於是我們只需要配置raw-loader即可拿到對應檔案的字串。
比如我們需要將sass/less檔案預編譯成css，
於是我們只需要配置sass-loader/less-loader即可處理。
webpack提供了一套API介面，開發者只需要按照它提供的規範照著做就行了。
對於開發者來說，除了需要閱讀英語文件能力和nodeJS之外，webpack的學習門檻真的不高。
2.一個簡單而通用的webpack配置檔案
我們以如下的 webpack.config檔案來進行分析
var webpack = require("webpack");
var DefinePlugin = require('webpack/lib/DefinePlugin');
module.exports = {
context:process.cwd(),
watch: true,
entry: './index.js',
devtool: 'source-map',
output: {
path: path.resolve(process.cwd(),'dist/'),
filename: '[name].js'
},
resolve: {
alias:{ jquery: process.cwd()+'/src/lib/jquery.js', }
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
_: 'underscore',
React: 'react'
}),
new DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
],
module: {
loaders: [{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}, {
test: /\.less$/,
loaders:['style-loader', 'css-loader','less-loader']
}, {
test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
}, {
test: /\.html/,
loader: "html-loader?" + JSON.stringify({minimize: false })
} ]
}
};
複製程式碼這個簡單的webpack配置檔案，基本可以處理大多數的前端業務場景了。
通過配置plugins、module.loaders、entry、output基本可以構建一個相容本地開發和生產環境的富應用web工程，下面針對以上的配置檔案進行分析。
3. webpack的配置檔案解讀
* module.loaders陣列
[{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
複製程式碼比如有個檔案require('index.jsx'), webpack會根據檔名是否滿足test欄位的正則來決定是否使用babel-loader來處理檔案。 exclude則是告訴webpack不需要對node_modules目錄進行處理
- resolve物件
resolve: {
alias:{ jquery: path.resolve(process.cwd(),'src/lib/jquery.js')},
extensions:['.js','.json']
}
複製程式碼resolve物件是在webpack預編譯時，就載入進整個webpack編譯的配置中的。
比如alias會建立檔案識別符號對映表
require('jquery')==> require('/Users/**/src/lib/jquery.js')
- plugins陣列
/**
比如有個檔案程式碼中存在process.env物件，則process.env將會被替換成上面的{
'NODE_ENV': JSON.stringify('development')
} console.log(process.env)==>console.log(({"NODE_ENV":'development'}))
*/
plugins: [new DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})]
複製程式碼關於這個配置檔案，讀者如果有疑問，可以直接在評論區留言，我會盡快回復，這裡就不贅述了。
更進一步的webpack配置含義可以參考我的github部落格webpack編譯流程漫談
4. webpack常用的loaders和plugins
關於loader這塊呢，webpack官方給出了非常詳盡的解決方案，基本不用開發者再去開源社群上尋找。前端資源loaders列表
關於plugins這塊，除了webpack官方推薦的幾款plugins外，社群上也有非常多不錯的外掛。webpack內建的plugins列表
經過多個前端專案搭建實踐下，筆者認為如下幾款plugins是非常不錯的。
1、程式碼優化之:
-
CommonsChunkPlugin - 抽取公共程式碼
-
UglifyJsPlugin - 壓縮混淆程式碼
2、 依賴注入之:
-
DefinePlugin - 自由變數注入
-
ProvidePlugin - 模組變數標示符注入
3、 檔案抽取之:
-
file-loader - 傳送font等檔案
-
ExtractTextPlugin - 抽取css檔案
4、 開發體驗優化之:
-
WebpackNotifierPlugin - 編譯完成動態通知
-
HtmlWebpackPlugin - 採用模板引擎形式注入到html檔案，讓開發更加easy
5、 目錄/檔案拷貝之:
- CopyWebpackPlugin - 目錄及檔案拷貝
5.webpack總結
本篇文章對webpack的講解主要集中在API層面。
另外，關於更加深入的webpack的編譯流程， 我幾個月前寫過一篇部落格webpack編譯流程漫談，可以供大家參考學習。
加微訊號: astak10或者長按識別下方二維碼進入前端技術交流群 ，暗號：寫程式碼啦
每日一題，每週資源推薦，精彩部落格推薦，工作、筆試、面試經驗交流解答，免費直播課，群友輕分享... ，數不盡的福利免費送
