資訊專欄INFORMATION COLUMN
摘要：續(xù)前端臨床手札構(gòu)建逐步解構(gòu)上工作流程案例最近添加了雪碧圖功能，并把替換成的，詳細(xì)可以看分支構(gòu)建生產(chǎn)上一篇說完了本地測試和是如何工作，接下來分析構(gòu)建生產(chǎn)模式下配置如何配置和每個模塊干了什么。
工作流程續(xù) 前端臨床手札——webpack構(gòu)建逐步解構(gòu)（上）
案例：multiple-page-vue-webpack-example
最近添加了雪碧圖功能，并把sass-loader替換成postcss的press，詳細(xì)可以看分支develop
構(gòu)建生產(chǎn)上一篇說完了本地測試webpack和express是如何工作，接下來分析構(gòu)建生產(chǎn)模式下webpack配置如何配置和每個模塊干了什么。
從流程能看到，這里用到兩個模塊build.js和webpack。當(dāng)你進入build.js文件能看到?jīng)]干什么，其實這里可以理解為構(gòu)建生產(chǎn)代碼前的預(yù)處理部分（刪除已構(gòu)建的文件、拷貝靜態(tài)資源相關(guān)的操作等），實際工作還是webpack完成的。
因此接下來說明的內(nèi)容就剩下webpack配置了，打開webpack.prod.conf.js能看到前面設(shè)置也沒什么大變化，但是添加的plugins卻有點不同。
webpackConfig.plugins = [].concat(webpackConfig.plugins, utils.htmlLoaders(config.template, webpackConfig.entry), [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
// new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new ExtractTextPlugin(utils.assetsPath("css/[name].[contenthash:5].css")),
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
// TODO: set node_modules fallback
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, "../node_modules")
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: "manifest",
chunks: ["vendor"]
})
])
utils.htmlLoaders()上一篇說過了是多入口頁面的設(shè)置，剩下的分別有：
webpack.optimize.UglifyJsPlugin()
webpack.optimize.OccurrenceOrderPlugin()
ExtractTextPlugin()
webpack.optimize.CommonsChunkPlugin()
接下來一個個講解，首先是webpack.optimize.UglifyJsPlugin
從名字能看出他是負(fù)責(zé)壓縮處理js的，其他沒啥好說的細(xì)節(jié)請看官方說明
這個看官方文檔說明感覺是個處理分包的機制的插件，然而也沒啥好說的了。
這個插件用來合并css文件，除了最后壓縮調(diào)用外，前面在所有輸出css的配置也得使用上ExtractTextPlugin.extract()來提前提取css配置。由于封裝到utils.js的cssLoaders方法下，這里代碼并沒有體現(xiàn)出來。
這個得重點說一說，webpack厲害之處在于他分包的科學(xué)計算法的體現(xiàn)就是這個插件，能智能地幫你把代碼拆分成多個包而已加載時并沒依賴缺失，下面講解配置，你也可以看官方文檔
使用
new webpack.optimize.CommonsChunkPlugin(options)
配置說明
options.name 合并或拆分后的名字，多用于設(shè)置。
options.filename 這個當(dāng)然是指生成出來的文件名字
options.chunks 指定js代碼塊來進行處理，默認(rèn)使用的是入口文件及其依賴
options.children 這個具體有什么用博主還真沒搞懂
options.async 設(shè)置為true，就可以創(chuàng)建一個異步請求的代碼塊
options.minSize 創(chuàng)建一個公共塊之前的模塊的最小尺寸，意思就是小于這個大小的塊并不會合并
options.minChunks 最小分割成多少個代碼塊，設(shè)置為Infinity就不會進行合并代碼。除此之外還可以設(shè)置方法，自己寫合并規(guī)則，想案例就是這樣處理的。
從案例分析，每個CommonsChunkPlugin將會是生成一個代碼塊，下面這段是生成一個入口公共塊，同時必須在html-webpack-plugin的依賴添加上（參考文檔utils.js）
webpack.prod.conf.js
new webpack.optimize.CommonsChunkPlugin({
name: "manifest",
chunks: ["vendor"]
})
utils.js
Object.keys(pages).forEach(function(pathname) {
let conf = {
filename: path.normalize(pages[pathname][0].replace(template.replace(/**.*$/,""),"")), //生成的html存放路徑，相對于path
template: pages[pathname][0], //html模板路徑
inject: false, //js插入的位置，true/"head"/"body"/false
};
if (pathname in webpackEntry) {
conf.inject = "body";
conf.chunks = ["manifest","vendor", pathname];
conf.hash = true;
conf.chunksSortMode="dependency";
}
plugins.push(new HtmlWebpackPlugin(conf));
});
而下面這段，則是將node_modules目錄下任何所需的模塊提取到vendor.js
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
// TODO: set node_modules fallback
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, "../node_modules")
) === 0
)
}
})
最后
到這里估計對webpack配置的比較迷惑的同學(xué)已經(jīng)清晰了多少，然而這篇并不是從頭幫你解析webpack所有配置的文章，內(nèi)容和標(biāo)題貨不對板有點抱歉，卻還是希望不懂的人自己多看官方文檔，官方文檔很多時候已經(jīng)說得比較清楚。我自己也是經(jīng)常使用一些插件時懵逼了去google找其他人使用的幫助，然而半天沒找到比較靠譜的方法，最后還是反復(fù)啃官方文檔或者看源碼解決的。所以或許這篇文章不能真正解決你的疑惑，但愿能很好地教會你看官方文檔;)。
然后在寫完這篇文章后，發(fā)現(xiàn)webpack還是有些功能需要gulp補充的，比如css的壓縮、圖片的處理（雪碧圖、svg等），希望最近能有空補上這塊內(nèi)容吧！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90939.html
摘要：前言由于博主最近又閑下來了，之前覺得的官方文檔比較難啃一直放到現(xiàn)在。文章會逐步分析每個處理的用意當(dāng)然是博主自己的理解，不足之處歡迎指出溝通交流。后續(xù)將會補上構(gòu)建生產(chǎn)的配置分析，案例參考。前端臨床手札構(gòu)建逐步解構(gòu)下 前言 由于博主最近又閑下來了，之前覺得webpack的官方文檔比較難啃一直放到現(xiàn)在。細(xì)心閱讀多個webpack配置案例后覺得還是得自己寫個手腳架，當(dāng)然這個案例是基于vue的，...
摘要：文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。但前提是需要約定傳入值和返回類型。 文件上傳基本是學(xué)習(xí)前端路上必定遇到的例子，然而網(wǎng)上能找到的都是單單滿足上傳這步的案例。大多文章之所以只說上傳這步估計是簡單易入門，但是實際工作時就會發(fā)現(xiàn)上傳文件這個功能上是簡單的，邏輯上卻比較復(fù)雜。 先說一下需求和功能點： 需求：上傳文件到服務(wù)器 功能：上傳 單這么...
摘要：感覺不能這樣下去就學(xué)寫一下單元測試，等他更新代碼我都跑一遍確認(rèn)一下，這樣工作安心多了。具體執(zhí)行的測試用例實現(xiàn)代碼。測試工具斷言庫測試驅(qū)動開發(fā)及測試框架入門學(xué)習(xí) 最近博主工作是和另一枚后端合作，但是經(jīng)常發(fā)現(xiàn)他寫的接口出錯，苦逼連連。感覺不能這樣下去就學(xué)寫一下單元測試，等他更新代碼我都跑一遍確認(rèn)一下，這樣工作安心多了。 經(jīng)過博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡...
摘要：感覺不能這樣下去就學(xué)寫一下單元測試，等他更新代碼我都跑一遍確認(rèn)一下，這樣工作安心多了。具體執(zhí)行的測試用例實現(xiàn)代碼。測試工具斷言庫測試驅(qū)動開發(fā)及測試框架入門學(xué)習(xí) 最近博主工作是和另一枚后端合作，但是經(jīng)常發(fā)現(xiàn)他寫的接口出錯，苦逼連連。感覺不能這樣下去就學(xué)寫一下單元測試，等他更新代碼我都跑一遍確認(rèn)一下，這樣工作安心多了。 經(jīng)過博主一番查找，貌似被推薦比較多的有mocha和chai，下面記錄簡...
摘要：然而我真的太天真，微信瀏覽器怎樣會讓你這樣好過問題集中于自動播放視頻這塊，需求很簡單自動播放全屏不顯示工具條自動播放一步步來，自動播放這個問題在十分肯定默認(rèn)是不支持的，必須基于用戶操作下才能加載視頻。至于在微信下和一個樣。 某天收到舊同事的信息說希望我?guī)褪肿鲆幌乱粋€簡單的H5，然后我看了看的確很簡單： 就是圖片滾動到最后自動播放視頻，播完顯示個按鈕交互。 然而我真的太天真，微信瀏覽器怎...
閱讀 667·2023-04-25 15:49
閱讀 3121·2021-09-22 15:13
閱讀 1258·2021-09-07 10:13
閱讀 3481·2019-08-29 18:34
閱讀 2562·2019-08-29 15:22
閱讀 512·2019-08-27 10:52
閱讀 689·2019-08-26 18:27
閱讀 3023·2019-08-26 13:44
