摘要:例如現在的入門學習手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學習手記一,主要是介紹了的核心概念,是整個學習過程的基礎知識。新生成的類似如下入門學習手記因為生成的內容過多,我直接省略掉了。
本人微信公眾號:前端修煉之路,歡迎關注。
最近開始想要維護一個個人的公眾號,初心是為了督促自己堅持做筆記,將學習的東西整理記錄下來。更進一步的要求是提升動手能力、文章寫作能力,和分享經驗。終極目標就是為了維護一個個人的品牌形象,像提到@阮一峰、@張鑫旭、@情封、@justjavac 等等業內知名的IT技術人員一樣,然后用自己的品牌形象獲取一些合法的經濟利益,用來改善生活。畢竟努力學習、認真工作,說到底還是為了更好的生活。
鑒于以上種種原因和目的,我開通了微信公眾號,并將文章更新到SegmentFault、掘金,進一步擴大傳播度。目前原創文章已經寫了7期。在這個過程中主要有以下幾點體會:
1、無法堅持原創日更的囧境。
因為我的寫作動機是自己的學習筆記、工作筆記的整理。也就是說,我要有不斷學習和工作的過程,然后將這個過程遇到的問題和解決方法記錄整理下來。這就需要強制性的養成一些習慣,并且壓縮掉一些自己以前花時間做的事情。目前這幾件事情做到。但是我無法處理掉臨時性突發的事件,尤其是處理起來比較費時間的事情。一旦將事情解決完畢,自己已經筋疲力盡,無心無力再堅持日更了。
目前想到的解決思路是,首先依然是要堅持原創日更文章,內容集中在學習筆記、工作筆記和一些反思等。然后一旦有臨時性突發事件耗費自己大量時間和經歷的情況發生,導致可能第二天無法更新文章,可以選擇轉載一些優秀的文章。
目前取得了一位公眾號作者@蘇南 的轉載權限。希望以后能獲得更多的作者轉載權限。
2、沒有文章可寫的囧境。
之前的幾篇文章主要是自己遇到的一些問題,文章的連續性并不強。如果是想保證能日更,那就必須有新的問題出現,并且是值得用來寫文章的。并不是說隨便的一個問題,例如標點符號錯誤,語法語句錯誤,就能拿過來寫一篇文章的。再有就是字數也不能太少,否則直接在SF上發一個筆記就好了。另外估計只有20、30的文章,是小學生寫的作文吧~ 沒有什么閱讀的價值。
所以我想到的解決思路是,做一個系列。例如現在的《webpack入門學習手記》系列。首先是我在學習webpack,然后就是webpack的各方面知識點足夠我更新一段時間,最后就是文章內容足夠多,也足夠豐富。所以這個系列就誕生了。
當這個系列更新完畢之后,也不用慌,還有ES6、Vue等等系列都可以寫。另外就是一些非系列的性的文章,可以穿插到日更里面。這樣公眾號的內容,也就豐富起來,也不會擔心沒有文章、沒有原創文章了。
3、收到粉絲留言和打賞的喜悅。
我的更新思路是,文章是先寫到SF平臺,利用Markdown快速寫好文章,然后更新到掘金,最后更新到微信公眾平臺,等到第二天定時群發消息。
這個過程中,我SF的聲望已經突破了1.5K,掘金和SF的粉絲關注度也在不斷增加。每次看到又有新的粉絲和點贊收藏,就有繼續寫下去動力。因為掘金和SF不同于微信,都是互相未曾謀面之人,僅僅是因為文章的好壞而關注和收藏的。
相比于SF和掘金,公眾號的粉絲大部分是我的親朋好友。他們被我強制性的要求關注我的公眾號。其實他們中有很多人,根本就不知道我寫的是什么,但是依然關注了公眾號。非常感謝他們的支持~
相比于粉絲數的增長,最開心的還是收到了真金白銀的打賞。只不過目前打賞一直沒有進到我的賬戶,不知道微信是怎么弄的。其實這幾期里面,給我打賞最多就是我爸媽了,我每寫的一篇文章他們都會下方默默的打賞我1元錢~ 可憐天下父母心啊~
不同于別的公眾號打賞,我設置的金額是1元、2元、5元,小額打賞。因為我覺得打賞金額過高,反而會嚇到一些朋友。能給我打賞一元,就已經非常開心了。
綜上所述,無論遇到的問題有多難,也會義無反顧的堅持下去。
以下是正文。
安裝上一篇webpack入門學習手記(一),主要是介紹了webpack的核心概念,是整個學習過程的基礎知識。接下來按照官方文檔給出的指南手冊依次進行。另外我會根據個人理解和操作過程,對文檔內容有一些修改,如有出入請參考原文。
要想使用webpack,前提是必須安裝Node.js,另外請保證使用最新的穩定版本。否則Node的版本過低,會導致意想不到的問題出現。
官方手冊中給出了兩種安裝方式,一種是本地安裝(Local Installation)和全局安裝(Global Installation)。在黃色的警告框處,明顯提示說,不建議全局安裝,因為會將webpack鎖定到指定的版本,另外也會在不同的webpack版本的項目中,構建失敗。所以我們直接使用本地安裝即可。
首先安裝最新版本的webpack:
npm install --save-dev webpack
因為使用的webpack v4 以上的版本,所以再安裝cli工具:
npm install --save-dev webpack-cli
注意:其實我在安裝的時候,使用的不是npm命令,而是cnpm。因為眾所周知的原因,國內下載安裝會比較慢甚至卡頓,所以使用了淘寶鏡像,可以自行百度下具體說明~ 以下文章中提到的所有npm命令地方,都請改成cnpm。
使用本地安裝的好處是,當升級項目時會比較方便。如果正確執行了上面的兩個命令,會在本地目錄多出一個node_modules目錄和一個package.json文件。打開package.json文件,內容如下:
package.json
{ "devDependencies": { "webpack": "^4.27.1", "webpack-cli": "^3.1.2" } }
這就是我們剛才安裝依賴。此時的package.json只有3行的代碼,如果是第一次接觸webpack并且是第一次接觸node的朋友,會被手冊中接下來的代碼產生疑問。因為接下來手冊添加了一段scripts代碼。我們在項目中,添加這段代碼之前,先來執行下面這個命令:
npm init
這個命令會初始化一個新的package.json,因為我們在安裝webpack時生成了一個package.json,所以接下來的內容會直接追加到文件中。
執行npm init這個命令之后,會向你提問一系列問題,如果覺得默認信息沒有問題的話,直接回車就行。新生成的package.json類似如下:
package.json
{ "devDependencies": { "webpack": "^4.27.1", "webpack-cli": "^3.1.2" }, "name": "webpackstudy", "description": "webpack入門學習手記", "version": "1.0.0", "main": "index.js", "dependencies": { "ajv-errors": "^1.0.1", ... }, "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "repository": { "type": "git", "url": "git@git.dev.tencent.com:siberiawolf0307/webpackStudy.git" }, "author": "siberiawolf", "license": "MIT" }
因為生成的dependencies內容過多,我直接省略掉了。此時就能找到指南手冊中的scripts了。我們在默認的test后面添加上官網中的代碼即可。如下:
package.json
"scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "webpack --config webpack.config.js" }
補充:在使用默認package.json是,會讓用戶填寫license。因為對開源協議比較陌生,我特意去查了一下使用何種開源協議。經過對比,我發現使用 MIT 協議是比較適合我的。MIT 協議是比較寬松的協議。此協議允許別人以任何方式使用你的代碼同時署名原作者,但原作者不承擔代碼使用后的風險,當然也沒有技術支持的義務。jQuery和Rails就是 MIT 協議。
上面的添加scripts.start,其實是運行webpack,并且運行的配置文件是webpack.config.js。因為手冊進行到這里,并沒有添加任何的 js 文件,所以先不要執行這個命令~ 我們后面再來學習。
說明:開始我將本小節代碼托管到了騰訊云開發者平臺,如果需要查看這節內容,請查找Installation目錄即可。
如果你真的動手操作了一遍安裝步驟,并且是初學者,那么請先刪除掉你文件夾下的package.json文件。因為接下來按照手冊給出的示例,我們是在一個全新的目錄下進行操作的,請注意這一點。
因為我們在執行安裝小節是,肯定已經在一個工作目錄下,例如我的工作目錄是webpackStudy,所以文檔中創建新目錄mkdir webpack-demo && cd webpack-demo省略掉。下面的代碼示例都是在這個工作目錄下。
因為已經刪除掉了package.json文件,接下來我們新生成一個:
npm init -y npm install webpack webpack-cli --save-dev
npm init -y,多了一個參數-y,就是說不用再詢問我們填寫參數了,直接使用了默認值。另外因為在本工作目錄下已經安裝過webpack了,此時執行的速度會非常快。
接下來,我們創建相應的html、js文件。
project
webpackStudy |- package.json + |- index.html + |- /src + |- index.js
src/index.js
function component() { let element = document.createElement("div"); // Lodash, currently included via a script, is required for this line to work // 這段英文注釋的意思是說,在index.html文件中已經引入了Lodash這個script標簽了,所以能正常使用 element.innerHTML = _.join(["Hello", "webpack"], " "); return element; } document.body.appendChild(component());
index.html
Getting Started
在工作目錄下創建index.html文件,并創建src目錄,然后創建index.js文件。文件的組織形式如上。然后復制粘貼html和js代碼。
接下來我們修改一下package.json文件,刪掉main入口,并設置private,防止意外發布代碼。
package.json
{ "description": "", + "private": true, - "main": "index.js" }
需要注意的是,在html頁面中,我們引入了Lodash這個js文件。Lodash是一個JS實用工具庫,非常適合于遍歷數組、字符串和對象等。
在index.js文件中,并沒有顯示的聲明需要引入Lodash。這樣就會造成以下幾個問題:
沒有顯示聲明,index.js中的代碼依賴于外部的擴展庫。
如果依賴不存在,或者引入錯誤,應用程序無法正常執行。例如沒有引用Lodash。
如果依賴文件被引入了,但是沒有使用,瀏覽器就會下載無用代碼。
如果我們使用webpack來管理JS呢?看看情況如何~
創建一個打包文件首先調整一下我們的工作目錄。創建一個dist目錄,用來存放壓縮和優化之后的代碼。而我們之前創建的src目錄,用來存放原始代碼。將之前創建的index.html文件移動到dist目錄下。最終文件結構如下:
project
webpackStudy |- package.json + |- /dist + |- index.html - |- index.html |- /src |- index.js
因為我們要在index.js中顯示聲明Lodash,所以需要先在項目目錄下安裝好,執行命令:
npm install --save-dev lodash
注意這里,我使用的是--save-dev參數。這樣會將Lodash添加到package.json的devDependencies屬性下。
接下來,通過import命令,顯示引用Lodash。
src/index.js
+ import _ from "lodash"; + function component() { let element = document.createElement("div"); - // Lodash, currently included via a script, is required for this line to work element.innerHTML = _.join(["Hello", "webpack"], " "); return element; } document.body.appendChild(component())
然后需要更新下index.html文件,因為我們修改了依賴js的方式。
dist/index.html
Getting Started - - +
最后,我們執行下面的命令:
npx webpack
然后打開index.html文件,就會看到 Hello webpack。
因為我們在執行npx webpack時,沒有使用執行的配置文件,所以使用默認值,也就是會在dist目錄下生成main.js。而這個打包之后的文件,就在index.html引入。
如果打開main.js,會發現Lodash已經在這個文件中了。webpack已經幫我們添加好了。
指定配置文件在webpack4 中,不用指定配置文件。但是這樣可擴展性就差了。所以我們創建一個webpack.config.js文件。
在工作目錄下創建webpack.config.js文件。內容如下:
webpack.config.js
const path = require("path"); module.exports = { entry: "./src/index.js", output: { filename: "main.js", path: path.resolve(__dirname, "dist") } };
然后執行如下命令:
npx webpack --config webpack.config.js
執行完之后結果跟之前一樣~
其實也可以不指定--config webpack.config.js這個參數。如果添加了webpack.config.js文件,webpack會自動使用這個配置文件。
但是假如文件的名字不是webpack.config.js時,就需要用到--config這個參數了。尤其是當配置文件被拆分成多個文件時,會非常有用。
之前我們直接在命令行中運行的方式叫做CLI,現在通過配置文件,具備更高的靈活性。可以指定loader、plugins 等。
NPM 腳本還記得在開始小節中,我們添加的scripts.start嗎?現在我們同樣的在package.json中添加一段腳本,這樣我們每次運行程序是,只需要簡單調用腳本即可。
package.json
"scripts": { "test": "echo "Error: no test specified" && exit 1", "build": "webpack --config webpack.config.js" }
然后在命令行執行如下命令:
npm run build
npm run build這段命令,就是制定package.json中的scripts腳本,其中build就是我們剛才定義的內容。
說明:
我將本小節代碼托管到了騰訊云開發者平臺,如果需要查看這節內容,請查找Getting Started目錄即可。
以上就是指南手冊中的Getting Started部分。總結一下主要內容:
安裝webpack和依賴的js工具庫Lodash
通過默認配置和指定配置文件,分別打包文件
使用NPM 腳本運行webpack
下一篇筆記整理webpack官方文檔的指南手冊剩余部分,敬請關注。
(待續)
相關文章
webpack入門學習手記(一)
webpack入門學習手記(二)
webpack入門學習手記(三)
webpack入門學習手記(四)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100053.html
摘要:爭取早日能完全拋棄掉中文文檔,最終可以翻譯英文文檔,輸出英文文檔。待續相關文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四 本人微信公眾號:前端修煉之路,歡迎關注。 showImg(https://segmentfault.com/img/bVbk0kO?w=1150&h=599); 之前用過gulp、grunt,但是一直沒有學習過webpack。這兩天剛好有時間,學習了下...
摘要:另外需要指定這個參數,表示在配置的數值以下的圖片才進行編碼,超過的不進行處理。代碼如下所以過程就是引入了,然后進行打包處理,生成和。目前這個入門學習手記到這里就結束了。完相關文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...
摘要:本人微信公眾號前端修煉之路,歡迎關注。再過一天,就是年了,在這里祝大家新年快樂,闔家歡樂,萬事大吉。 showImg(https://image-static.segmentfault.com/230/457/2304574665-5c1373e5a1763_articlex); 本人微信公眾號:前端修煉之路,歡迎關注。 再過一天,就是2019年了,在這里祝大家新年快樂,闔家歡樂,萬事...
摘要:本人微信公眾號前端修煉之路,歡迎關注。距離上一次更新這個系列,過去了兩天。最近實在是有點忙,沒有擠出時間整理。感覺日更還真是困難 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號:前端修煉之路,歡迎關注。 距離上一次更新這個系列,過去了兩天。最近實在是有點忙,沒有擠出時間整理。感覺日更還真是困難
摘要:接上回第二部分,編寫爬蟲。進入微信嵌套選擇圖片和上傳圖片接口,實現一鍵上傳圖片,遇到問題看吧,我現在已經可以通過爬蟲獲取的提問標題了。微信故意省略想做小偷站的,看到這里基本上就能搞出來了。下一篇,采集入庫 上回,我裝了環境 也就是一對亂七八糟的東西 裝了pip,用pip裝了virtualenv,建立了一個virtualenv,在這個virtualenv里面,裝了Django,創建了一個...
閱讀 662·2021-11-24 09:39
閱讀 2315·2021-11-22 13:54
閱讀 2197·2021-09-23 11:46
閱讀 3246·2019-08-30 15:55
閱讀 2679·2019-08-30 15:54
閱讀 2403·2019-08-30 14:18
閱讀 1546·2019-08-29 14:15
閱讀 2732·2019-08-29 13:49