webpack技術講解及入門
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編譯流程漫談，可以供大家參考學習。
最後 歡迎大家關注我的知乎和前端學習專欄。
一個小廣告:
今晚8點我會在飢人谷前端學習平台上直播講解webpack，純免費的哦~
想參加的同學加Q群：369325292，加群暗號：webpack
推薦閱讀：