發表文章

webpack的學習(7) ------- css-loader, style-loader的使用。

圖片
通常我們撰寫網頁一定會用上css來做美化的效果,但是在webpack中它本身只認的懂javascript files !那css要怎麼辦呢?-----這就要仰賴我們loader來幫我們處理 css, jpg .....等這些其他的靜態檔案囉!

CSS-Loader: 首先這邊我們會先介紹 webpack 上最多人用的 css-loader!他本身目的就是幫我們把css file透過@import 或是url()的方式載入到 Javascript 內,這樣webpack就可以認得css。其更多的詳細設定可以參考 css-loader的手冊。


Style-Loader: 當我們用了css-loader之後其實在browser那邊並不認得,所以需要一個可以將載入到Javascript內的css內容轉成browser看得懂的css 語法!這個任務就是Style-Loader在做的事情,否則只用css-loader 會發現頁面其實沒有真的去執行 css 裡面的設定。更多有關Style-loader的設定可以參考style-loader的手冊。


安裝CSS-Loader 與Style-Loader 當然首先我們要先安裝這兩個loader啦!透過npm 就可以很簡單的把這兩個loader裝起來啦!

~/mywebpack $  npm install--save-devcss-loader   style-loader

這邊因為這兩個loader只是開發的時候會用到,所以用 --save-dev的參數。


建立css 檔案: 接著我們在app這個資料夾下面建立一個名為 ' index.css' 的檔案來撰寫css內容。所以我們的專案結構就變成如下所示:

mywebpack/
|------------- app/
|                     |--------- index.css
|                     |--------- index.js
|
|-------------- node_modules/
|
|-------------- index.html
|-------------- package.json
|-------------- webpack.config.js

接著我們在index.css 內寫入下面的css 內容。
body{ …

Django auth 採用自己的 models 做使用者登入在check時的問題。

圖片
起因: Django原生有提供一套讓使用者做註冊與登入的方法跟架構(django.contrib.auth.models內),但是有些時候我們會改用自己的models來做使用者登入與註冊的流程~例如:django 是用user name當作使用者帳號,但是我想用email當作使用者帳號就沒辦法用django原生的架構

系統: Ubunut 16.04
Django 1.11
python3


架構: MyProject
|--------MyUser
|                |-------models.py
|                |------- .........
|
|--------myproject
|                |-------settings.py
|                |------- .........
|
|--------manage.py

簡單的說就是先用django-admin 生 MyProject然後再到目錄下用python manage 生 app(MyUser)然後我的使用者Database架構會寫在MyUser下的models.py內(記得settings.py內的INSTALLED_APPS要加入MyUser)。

以下是我的部份 User model code :
class User(AbstractBaseUser, PermissionsMixin): email = models.EmailField( _('email'), max_length=254, unique=True, help_text=_( 'Required ! 254 or fewer, Letter ,digits and @/./-/_ only.' )) # end of email setting biotrump_id = models.CharField( default=uuid.uuid4, editable=False, max_length=254, db_index=True) na…

桃園西濱一個人的輕旅行

圖片
端午四天連假台北第一天就狂下雨,台北的氣候真的不適合像我這種愛往外跑得南部小孩。
最後決定在5/29那天(因為隔天要去看神力女超人><)出去走走要不然四天都待在家搞的心情都快發霉。

神奇的是中午台北還陰陰的但是出了台北到了林口西濱海邊就是一整個好天氣~你看台北果然是很糟糕的都市(就天氣而言)。

經過幾次的騎西濱回嘉義的經驗發現西濱有許多通往海邊的小路讓我這個beach boy一直想去探探路做個小小冒險!這次就在擇日不如撞日加上天氣又好的機運下就來一個人的輕旅行吧!

騎著大老婆PGO Tigra 150背著小老婆Olympus EM-1與腳架就開始隨機亂晃的一個下午啦!
大約騎到蘆竹附近的一處圳頭村的位置看著google畫著海邊有條小路便決定找個田間小路往好久不見的海邊騎去。

沒想到一個通往海潮之聲的轉角處眼前海岸的景色就出現在眼前,不知道有多久沒來看看蔚藍的海。



雀悅的心情被鹹鹹的海風吹著~今天風還不小呢!看著海邊幾處私人架設的木棧撩望台,雖然不知道牢不牢固但是小男孩的靈魂從心底緩緩飄出,讓我整個人回到小時候白目的樣子想要爬上去看看!!


藍藍的天坐在木台上看著遠方,雖然沙岸的海不如東部岩岸的翠藍但是好天氣的海邊就是如此的好心情。
吹完海風此時大約下午兩點,身上都是風沙接著就繼續往南騎了!大約騎小段路又鑽進去小路通往海邊,此時發現路被一扇關閉的大門禁止通行。不過看著鎖住的大門兩旁草叢是可以讓機車通過的外加路邊停了2-3輛機車與汽車,心想應該來海邊釣魚的釣客吧!所以應該大門後面會有不錯的風景吧!就這樣冒險的欲望又讓我驅車前往~果然這裡是『草漯沙丘』


這邊算是個保護區雖然不見釣客到是有個大大的沙丘可以讓人的身體充滿更多沙子 XD


在這篇沙丘旁有著發出嗡嗡聲發電的大風車,頓時覺得這些人造的風車與這片沙丘一整個就是不搭還有種覺得醜陋的感覺或許自然就該回歸自然吧!一望無際的沙丘也會讓人忘了很多煩惱有種想躺在鬆軟的沙丘上衝動~但是今天太陽很大、我不想全身都是沙子啊!



留幾張回憶的相片後看著時間才下午三點多還有時間可以繼續往南騎就打算去每次經過都會看到有人在玩風箏衝浪的海邊!

繼續沿著西濱再騎一小段路的觀音海水浴場,每次經過這邊在西濱上面就會看到左手邊天空上的大風箏飛來飛去,仔細一看原來是海邊有人在玩風箏衝浪!

每每路過總是因為怕時間來不及不想回嘉義太晚而PASS這個地方,這次總算可以親自來看看…

webpack的學習(6) ------- webpack-dev-server的使用。

圖片
Why: 在之前的範例中,每次修改了專案的內容(html or javascript)就是重新打包一次然後會到瀏覽器再重新載入一次是不是讓人覺得很浪費時間在移動滑鼠上面啊? XD
我想很多人都一定會有這種開發上討厭的情況,當然webpack也有發現到這點因此有個webpack-dev-server的功能套件可以使用,讓你可以在編寫code後按下ctrl + s 存檔後馬上更新你的網頁、馬上看到修改後的效果,這個套件就叫做 " webpack-dev-server"。接下來我們就來簡單的介紹與使用這個套件吧!

Step1 安裝 webpack-dev-server: 第一件事當然是安裝webpack-dev-server啦!我們在webpack資料夾下使用 npm 安裝webpack-dev-server但是這次我們在參數上改成 --save-dev 而非之前jQuery的 --save
兩者的不同是 --save-dev是告訴npm 『這只是開發用的套件』並不是在真正成品上會用到的套件!也就是說這個只是開發用,最後的成品沒有 webpack-dev-server這個套件不會影響其功能的。

~/webpack/ $  npm   install--save-devwebpack-dev-server

安裝完後我們可以開啟"package.json"來看看是不是多了一個叫做"devDependencies"的屬性,並且內容寫著"webpack-dev-server": "^2.4.5"  呢!

這個devDependencies與我們之前裝jQuery的 dependencies的意義上是不一樣的!也就是說在真正的完成品上 dependencies列出的套件是一定要有的,否則我們的專案是不會運作或是會有功能上的缺失。然後devDependencies則是說:在開發上會用的軟體、套件,但是不會影響到最後真正的成品。 就像我們用webpack-dev-server只是方便我們開發,但在最後成品上沒有webpack-dev-server本來就不會影響到程式的運作與功能,webpack本身也是!因為它只是我們用來打包的工具,最後我們只是把webpack打包好的 html, js…

webpack的學習(5) -------- vendor plugin 結合 npm 安裝第三方lib

圖片
2017-05-15 新增對 --save 與 --save-dev的說明與圖片錯誤。
緣由: 在上一章節我們透過下載 jQuery library 做打包的動作,這種情況是早期我們在撰寫網頁比較常遇到的情形。在後來有了nodejs之後我知道很多人都是直接採用npm 來安裝需要的開發用library,npm 是一套管理用javascript開發的軟體資料庫,npm 上面有許多我們撰寫專案可以用到第三方library並且會依照版本的不同去分類,所以很多好用的軟體或是大師寫的javascript應用軟體、函式庫都可以在上面取得,所以這次我們改採用npm 來安裝jQuery 並且做打包的行為。

Step1 不做Chunk: 首先我們跟上一章節一樣先做全部打包在一起的方式!我們先把vendors這個資料夾刪除因為我們要採用npm install的方式安裝jquery而不是自己去下載,然後在webpack資料夾下用命令列執行~ $ npm install --save jquery  來安裝jquery。 這邊我們參數下了 --save 就是告知npm 把jQuery裝在local而非系統環境也就是說jQuery會裝在webpack下的node_modules資料夾下,真的搞爛了就把node_modules資料夾刪除就好,不用擔心系統被我們搞亂了!

~/ webpack $  rm -rf  vendors
~/ webpack $  npm install --savejquery

之後我們打開 "package.json "這個檔案會看到在 "dependancies"這個屬性多了jquery的資訊與安裝的版本。這就是npm 的好處!裝了什麼東西會紀錄而且就算移到別台電腦去還可以把需要用到的套件透過npm 去裝回來。
這次我們在參數上改成 --save 而非之前webpack的 --save-dev
兩者的不同是 --save-dev是告訴npm 『這只是開發用的套件』並不是在真正成品上會用到的套件!也就是說這個只是開發用,最後的成品沒有 webpack這個套件不會影響其功能的。
但是 --save則是我們最後成品中真正會用到的函式庫或是套件軟體!沒有這個套件或是函式庫我們的成品就沒辦法運作。



所以目前在webpack資料夾下的結構大致…

webpack的學習(4) --------- vendor library 靜態下載與 chunk.

圖片
原因: 通常我們在專案的實現的時候可能會用到第三方的library而並非全部都自己撰寫所有的功能,因此這邊會開始把所謂的第三方library(vendor)打包進去。

方向: 這邊我們會先針對直接下載Library的方式來實做(npm install 第三方之後在介紹),並且會在後續使用webpack的chunk功能如何把vendor library切割出來,這次的專案會延續上一個教學的內容繼續實做。

Step1: 我們先下載jQuery 這個前端幾乎最常被使用的library,先到jQuery官方網站下載。
點選右上方的『Download jQuery 』進入下載頁面,接著我們點選『 Download the compressed, production jQuery 3.2.1 』這個縮小過的library。





接著我們回到webpack資料夾下在新開一個叫做vendors的資料夾並且把"jquery-3.2.1.min.js"放到這個資料夾下。其整個架構會如下:

/webpack/
|-----/app/
|        |----- index.js
|
|-----/vendors/
|        |------jquery-3.2.1.min.js
|
|------index.html
|------package.json
|------webpack.config.js


Step2:
接著我們開始編輯webpack.config.js檔案的內容。
首先我們先試著把jquery跟index.js整個打包到bundle.js裡面,所以在entry的設定就改成如下:
const path = require('path') // nodejs core module module.exports = { entry: { app: ["./app/index.js", "./vendors/jquery-3.2.1.min.js"] }, output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } }
我們在app那邊…

webpack的學習(3) -------- webpack.config.js

圖片
2017-05-15 修改package.json圖片錯誤。
觀念: 在官方的說明文件裡webpack主要有四個概念~ Entry, Output, Loaders, Plugins

1.Entry: Webpack會對我們開發應用專案(application)的相依檔案(dependencies)建立一個圖形結構(類似樹狀圖),而這個圖形結構會有起始點(root)這個起始點就所謂的進入點。 webpack 會從這個進入點的第一個檔案開始執行並且開始依循圖形往下找到其他的相依程式做打包的動作。 2.Output: 當webpack打包好你的程式後必須要告訴webpack要將打包好的程式放在哪邊?因此output這個屬性就是在告訴webpack要把包好的東西放在哪邊。 3.Loaders: 對於專案會用到的資料如:css, html, scss, jpg...等,webpack都會把他們當成一個模組(module)然而webpack其實只認得Javascript。Loader在webpack裡就會把上述這些檔案轉成模組並且加到關聯圖形中。 換個說法Loaders的主要目的有兩個: 第一 ~ 辨認哪些檔案需要被一些特殊的loader做轉換(例如:jsx 請babel-loader轉成javascript 檔案)。 第二 ~ 把那些被加到關聯圖形結構的檔案做轉換最終可能會被打包在一起。 4.Plugins: 當Loader 只有針對檔案轉換的動作時plugins 是最常被使用在執行動作和編譯打包模組時一些自定義的功能與切塊(chunks)功能,這也是webpack最強大的地方。 webpack擁有很多plugins ,可以透過這個連結 list of plugins找到更多plugins的相關資料與用法。 使用Plugins可以讓你的webpack變得功能更強大!
上面這四個概念的使用主要是撰寫在一個設定檔內~也就是webpack的設定物件(Json格式的檔案),接下來我們可以來試著寫寫這個設定檔。
Step1: webpack在執行時會先在當下目錄找找有沒有一個檔案叫做webpack.config.js』檔案,用這個檔案內撰寫的設定作為執行時的 entry 的檔案名稱設定是哪個?output的設定載哪邊?Loaders要用到哪些?Plugins有哪些的依據
在撰寫webpack.…