資訊專欄INFORMATION COLUMN
摘要：個(gè)人接觸前端并不是很久，對(duì)于卻是久仰大名，也難怪，作為一款優(yōu)秀的模塊加載器兼打包工具，近來(lái)風(fēng)頭可謂一時(shí)無(wú)二，自己也想著學(xué)習(xí)并希望能夠了解其工作方式和理念，拋開(kāi)跟風(fēng)不談，至少學(xué)習(xí)新的技術(shù)對(duì)自己是大有裨益的。
個(gè)人接觸前端并不是很久，對(duì)于webpack卻是久仰大名，也難怪， 作為一款優(yōu)秀的模塊加載器兼打包工具，webpack近來(lái)風(fēng)頭可謂一時(shí)無(wú)二，自己也想著學(xué)習(xí)并希望能夠了解其工作方式和理念，拋開(kāi)跟風(fēng)不談，至少學(xué)習(xí)新的技術(shù)對(duì)自己是大有裨益的。
引用一張webpack官網(wǎng)的圖片，作為一款模塊打包器，webpack負(fù)責(zé)分析模塊間的依賴關(guān)系，隨即將模塊按照不同的加載器規(guī)則生成相對(duì)應(yīng)的資源。我們需要模塊化工具為我們做的，包括初始加載量少，按需加載，自定義打包邏輯等功能功能，webpack都能夠滿足，它的loader加載器可以將各種類型的資源轉(zhuǎn)換成我們所需要的模塊，其豐富的插件系統(tǒng)也讓我們自定義需求。
安裝
//node 環(huán)境自不必多說(shuō) //全局安裝webpack npm install -g webpack //進(jìn)入項(xiàng)目目錄 //生成package.json npm init //安裝webpack依賴 npm install webpack --save-dev
基本使用
//靜態(tài)頁(yè)面：index.html
webpack
//JS文件入口：entry.js
document.write("Hello world. ")
編譯 entry.js 并打包到 bundle.js,于命令行輸入
webpack entry.js bundle.js
隨即你會(huì)看到命令行會(huì)顯示日志，提示你打包成功，打開(kāi)瀏覽器運(yùn)行index.html，你會(huì)看到Hello world.
配置
var webpack=require("webpack");
module.exports={
//頁(yè)面入口設(shè)置
entry:"./entry.js",
//入口文件輸出配置
output:{
path:__dirname,
filename:"bundle.js"
},
module:{
//加載器配置
loaders:[
//加載器可以使用簡(jiǎn)稱例如style,其具體規(guī)則可見(jiàn)webpack的resolveLoader.moduleTemplates api
//.css 文件使用style-loader和css-loader加載器來(lái)處理
{ test: /.css$/, loader: "style-loader!css-loader" },
//圖片文件使用url-loader加載器來(lái)處理，小于8kb的話則轉(zhuǎn)換成base64
{ test: /.(png|jpg)$/, loader: "url-loader?limit=8192"}
]
},
//插件項(xiàng)配置
plugins:[
//為bundle.js頭部添加注釋信息
new webpack.BannerPlugin("this file is created by cala")
]
}
webpack.config.js配置基本上存在于每一個(gè)使用webpack項(xiàng)目中，作為一個(gè)配置項(xiàng)，告訴webpack它的具體功能，包括加載器作用與插件項(xiàng)的功能，所有的加載器都是通過(guò)npm來(lái)加載，可以閱讀相應(yīng)的文檔來(lái)了解不同加載器所提供的功能。
執(zhí)行
webpack --watch
啟動(dòng)監(jiān)聽(tīng)模式，如此便可以避免在每次修改模塊后都重新編譯，開(kāi)啟監(jiān)聽(tīng)模式后，沒(méi)有變化的模塊會(huì)在編譯后緩存到內(nèi)存中，而不會(huì)每次都被重新編譯
npm install webpack-dev-server -g
使用webpack-dev-server構(gòu)建本地服務(wù)器，在瀏覽器輸入localhost：8080會(huì)以監(jiān)聽(tīng)模式自動(dòng)運(yùn)行webpack
關(guān)于webpack還有很多令人驚奇的地方，看官方文檔可以知道很多關(guān)于webpack的工作原理或者是其相關(guān)的周邊生態(tài)，道阻且長(zhǎng)，也希望自己能夠不斷的學(xué)習(xí)新的技術(shù)，未來(lái)能夠用于項(xiàng)目中，更深的體會(huì)其原理跟奧妙。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84290.html
摘要：在這個(gè)過(guò)程中，會(huì)用到一些解析工具用來(lái)預(yù)處理一些模塊以及拓展語(yǔ)言例如這些工具的配置使用都是在中完成的。屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè)。插件接口功能極其強(qiáng)大，可以用來(lái)處理各種各樣的任務(wù)。 對(duì)于前端工程化，webpack一個(gè)神奇的工具，既然是個(gè)神奇的工具。那我們保留我們的好奇心，來(lái)聊一聊它，首先我們要搞清楚webpack到底是用來(lái)解決什么問(wèn)題的，然后我們來(lái)看看它到底是怎么做的，最后來(lái)看看...
摘要：在下一個(gè)章節(jié)，我們會(huì)配合搭建一個(gè)可以用最新語(yǔ)法開(kāi)發(fā)的平臺(tái)項(xiàng)目構(gòu)建二編譯環(huán)境搭建。 注：以下教程均在 windows 環(huán)境實(shí)現(xiàn)，使用其他操作系統(tǒng)的同學(xué)實(shí)踐過(guò)程可能會(huì)有些出入。 一、準(zhǔn)備工作 安裝最新的 Node.js 環(huán)境；（官網(wǎng)地址：https://nodejs.org/zh-cn/） 安裝 cnpm 淘寶npm鏡像；（在控制臺(tái)執(zhí)行命令：npm install -g cnpm --r...
摘要：中的會(huì)自動(dòng)的替換中的，也即最后生成的文件叫做。基礎(chǔ)路徑后面介紹。都需要依賴模塊，我也裝啦。我將完整的復(fù)制一份，當(dāng)我在打開(kāi)的時(shí)候，它又讓我重新在裝，以及，后來(lái)我全局安裝。 備注：說(shuō)明（第一次寫(xiě)的文章還沒(méi)有寫(xiě)好就提交啦，這里我接著上篇文章繼續(xù)寫(xiě)））上編文章說(shuō)道安裝webpack的順序不能改變 下面繼續(xù)： 一：webpack的目錄結(jié)構(gòu) 附上本人webpackdemo01的代碼 下面介...
摘要：還可以用作文件加載使用，詳細(xì)請(qǐng)看。實(shí)用命令除了簡(jiǎn)單運(yùn)行，還可以添加幾個(gè)參數(shù)，方便部署文件處理。以上僅僅介紹了前端開(kāi)發(fā)最基本的用法，更多參數(shù)以及功能使用，參考官網(wǎng) 作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉(zhuǎn)載請(qǐng)注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...
摘要：還可以用作文件加載使用，詳細(xì)請(qǐng)看。實(shí)用命令除了簡(jiǎn)單運(yùn)行，還可以添加幾個(gè)參數(shù)，方便部署文件處理。以上僅僅介紹了前端開(kāi)發(fā)最基本的用法，更多參數(shù)以及功能使用，參考官網(wǎng) 作者：Jogis原文鏈接：https://github.com/yesvods/Blog/issues/3轉(zhuǎn)載請(qǐng)注明原文鏈接以及作者信息 showImg(http://itanguo.cn/wp-content/uploads...
閱讀 3023·2023-04-26 00:32
閱讀 507·2019-08-30 15:52
閱讀 2114·2019-08-30 15:52
閱讀 3357·2019-08-30 15:44
閱讀 3288·2019-08-30 14:09
閱讀 1423·2019-08-29 15:15
閱讀 3401·2019-08-28 18:12
閱讀 1084·2019-08-26 13:55
