webpack前端自動化開發超入門

webpack 的介紹
webpack 將前端多套工具整合
多支 .js 連結檔所產生的問題
透過 webpack 模組化 .js 檔
現在前端與 webpack 的流程
webpack 在 node.js 的開發環境
NVM 管理 node.js 版本
npm 前端套件管理
webpack 自動化工具使用 babel 處理 JavaScript
webpack 設定檔的建立
npm 安裝 webpack 模組檔進入專案
設定 webpack 的專案資料夾中的 entry (進入點) 與 output (輸出目地)
執行 webpack
直接在 webpack 的 index.js 注入點，撰寫 JavaScript ES6 不會做相容性降轉處理
掛載 babel-loader 到 webpack，處理 JavaScript 相容降轉
babel 的介紹與使用於 webpack
NPM 設定 webpack 指令
自定 NPM 行指令讓 webpack 運作不同的開發環境與編譯動作
–mode development 與 –mode production
執行 NPM 自定名稱指令後，指定運行 webpack 編譯模式與動作
什麼是模組化
export default 以模組匯出程式碼，包成一個模塊檔案
import 匯入外部模塊檔，指定於一個變數使用
export default 模塊檔案，所帶出的資料或內容是什麼，import 匯入輸出就會相對呈現內容

Youtube Mike – Webpack4 從零開始的前端自動化工具

教學主題一：Webpack 入門介紹

課程開始

什麼是Webpack? 為什麼要用Webpack?

教學主題二：開發前的準備

【webpack4 #02】開發環境建置

安裝 node.js
安裝 NVM
NVM 指令
安裝 VSCode
Monokai Dark Soda
Live Server
AutoFileName
vscode-icons
Copy filename

教學主題三：Webpack基本設定

【webpack4 #03】來個HelloWord

webpack 整個核心就是注人的概念
從零開炲建構 webpack
npm init-初始化專案建立 package.json
安裝 npm 套件 webpack 與 webpack-cli
node_modules 資料夾，webpack 所用到的相關插件與賴件
package-lock.json，相關的相依性與設定
package.json 下完指令後變更說明
新增一個 webpack.config.js 檔案
webpack 注入點：entry: ‘./index.js’ 與加入 index.js 檔
webpack 輸出檔：output: { filename: ‘index-bundle.js’ }
module.exports = {}
package.json 裡加入 webpack 運行指令
修改 package.json 的 npm “scripts” 指令，加入 webpack 運行設定
執行 npm run start 運行 webpack，由 index.js 注入檔打包編譯輸出檔至 dist/index-bundle.js

【webpack4 #04】Path檔案路徑設定

將未編譯過的 index.js 檔，使用 src 資料夾放置與其他相關開發未編譯檔
path.resolve() 與 __dirname 路徑與環境變數設定
path.resolve() 方法讓路徑轉換成絕對路徑
__dirname 為 node.js 下的環境變數
指派當前路徑，path.resolve() 與 __dirname 與 ‘src’ 結合出絕對路徑
output 的 path 方法指定輸出資料夾路徑
webpack 的 output 輸出資料夾路徑預設資料夾為 dist
客製指定輸出資料夾

【webpack4 #05】npm scripts的使用

production (生產模式) 與 development (開發模式)
警告提示 production (生產模式) 與 development (開發模式) 的大意
production (生產模式) 與 development (開發模式) 的差別與使用
package.json 的 npm 指令設定 development 開發模式指令
package.json 的 npm 指令設定 development 開發模式指令
package.json 的 npm 指令設定 production 生產模式指令

【webpack4 #06】環境變數NODE ENV的概念與使用

什麼是 NODE_ENV
安裝 cross-env
package.json 裡的 “scripts”: {} 中，在執行模式使用 NODE_ENV= 將 webpack 模式以 node.js 傳入使用
設定 package.json 裡的 “scripts”: {}，加入 NODE_ENV=
process.env.NODE_ENV 取得 package.json 執行 webpack 指令傳入 node.js 環境變數
在 PC windows 的終端機指令出現的錯誤
使用 NODE_ENV 的方式執行 webpack 編譯模式
NODE_ENV 透過編譯環境判斷式，條件成立後執行後續內容
module.exports = {} 的 mode: 設定使用 process.env.NODE_ENV，以 node.js 的環境變數指定 webpack 執行 webpack 編譯環境
依自已習慣選擇使用 NODE_ENV 的方式或是 npm scripts 自定指令參數 –mode 方式，執行 webpack 編譯模式

【webpack4 #07】永不停止的Watch

未編譯程式碼來源檔每次撰寫後，都需要在終端機執行 npm 指令
設定 package.json 的 npm 自定指令 watch
執行 npm watch 指令讓 webpack 不停止編譯動作
使用 Ctrl + C 組合鍵讓 npm wathc 狀態停止

【webpack4 #08】Filename檔案名稱修正

webpack.config.js 設定多筆 entry
webpack 設定多個 entry (注入點)
webpack [name] 方法設定，讓多個 entry (注入點) 對應輸出檔案
多個 entry (注入點) 設定後的輸出

教學主題四：Webpack loader & Plugin

【webpack4 #09】css loader

什麼是 css loader
安裝與使用 css-loader style-loader
安裝 css-loader 與 style-loader
設定 css-loader
loader 的順序是由後倒序執行到前面
重架專案資料夾架構
專案資料夾根目錄下建立 index.html
src/ 的 js/ 資料夾下的 index.js 引入 /css/index.css
npm 執行 watch 指令，執行 webpack 編譯模式
把 css 樣式包進 JS 程式中執行與使用 .css 檔概念

【webpack4 #10】獨立拆分css檔

webpack 處理 css 獨立出 .css 檔
安裝 npm extract-text-webpack-plugin 套件
設定 webpack.config.js
設定 plugins，用來解決 loader 做不到的事
設定 entry 注入點
將樣式獨立於 CSS 檔與直接整合在 JS 內

【webpack4 #11】PostCSS與autoprefixer CSS瀏覽器相容性

什麼是 PostCSS 與 autoprefixer
安裝 PostCSS 與 autoprefixer
建立與設定 postcss.config.js
建立 postcss.config.js 加入插件 autoprefixer 與設定
PostCSS 使用外掛 autoprefixer 針對瀏覽器相容性設定
webpack.config.js 的 loader 轉 css 檔設定
執行 webpack 編譯處理前綴 (prefix) 後產出 css 檔

【webpack4 #12】FileLoader 搬移檔案

現在前端開發主流的開發資料夾結構，src (待編譯資料夾) > webpack > dist (已編譯資料夾)
根目錄 html 檔處理進 src 資料夾中
注入點 index.js 設定 import index.html
.html 檔不是透過 loader 處理，而以 file-loader 直接搬移處理
安裝 file-loader
設定 file-loader
file-loader 使用 loader 的細部設定方式
loader 細部設定方式：指定名稱
loader 細部設定方式：option 的輸出檔名與路徑
修改 webpack.config.js 執行 webpack 編譯
由 src 資料夾搬移一份 index.html 檔至 dist 內
dist 資料夾下的 .js 檔調整進 dist/js 資料夾內
src/index.html 的 script src 修改與加入 css link
編輯與修改程式碼，只在 src 資料夾下的檔案編輯

【webpack4 #13】SassLoader

安裝 sass-loader node-sass
設定 webpack.config.js 檔，加入 Scss 編譯處理設定
建立 scss 資料夾與 index.scss 檔
設定注入點 index.js 檔
webpack 執行 Scss 編譯
以 style-loader 方式透過 JS 進行渲染
透過 plugin 的 extractCSS 將 .scss 檔進行編譯處理成 .css 檔於 dist 資料夾中

【webpack4 #14】webpack dev server

什麼是 webpack-dev-server
webpack-dev-server 安裝與設定
webpack-dev-server 安裝
webpack-dev-server 的設定
設定 package.json 的 npm 指令
設定錯誤 npm 指令參數 –mode development (–mode 寫於 webpack 檔與設定的前面)
正確設定 npm 指令參數 –mode development (–mode 寫於 webpack 檔與設定的後面)
webpack-dev-server 啟動時的注意事項
webpack-dev-server 預處理於記憶體不會產生 dist 資料夾
執行 webpack-dev-server 時會在終端機上產生 local server 網址
開啟 local server 網址瀏覽器頁面，修改 src 資料夾下相關檔案會同時更新畫面
使用 npm 自定指令加入參數 –open，開啟 webpack-dev-server 時自動開啟預設瀏覽器

【webpack4 #15】babel

什麼是 babel
webpack 安裝 babel 處理套件 (babel-loader、@babel/core、@babel/preset-env)
webpack 的套件 babel-loader、@babel/core、@babel/preset-env 簡介
babel-loader webpack 取用高版本 JS 引入處理
@babel/core 程式需要調用 Babel 的 API 進行編譯
@babel/preset-env 使用最新版本的 JavaScript 去編譯，不理會哪些語法需要轉換
webpack.config.js 針對 babel 設定
專案資料夾加入 .babelrc 檔與設定
babel 轉譯 JS 新版語法降轉處理
修改 src/index.js 檔，查看 babel 降轉 JS ES6 處理
為何要透過 babel 降轉 JS 新版語法
babel 官網與文件設定與使用
babel 官網文件與設定說明
babel Try it out 線上即時查看降轉

【webpack4 #16】Import and Require

JavaScript 模組化方式的概念
JS 模組化方法一 (node.js 模組化方式)：module.export = (輸出) / var = require(‘‘) (引入)
module.export = 模組輸出的概念
require() 引入指定路徑 module.exports 的模組檔來使用
require() 引入模組檔使用方式
module.exports 模組內容除了物件也可以是函式，透過 require() 賦予的變數後方加 () 執行模組內的函式
module.exports = 之後所指定的模組內容匯出被引入使用是什麼就是什麼 (時是物件就是物件，而是函式就會是函式)
module.exports 模組化的函式，透過 require() 賦予的變數執行函式傳入字串參數，由模組化的函式執行產生結果
JS 模組化方法二 (JS ES6 模組化方式)：export default 模塊 (輸出) / Import 名稱 from “” (引入)
ES6 export default 模組化輸出方式與觀念
import 引用後，不賦予變數直接使用
import 引用後，賦予變數後使用
node.js 模組化方式與 JS ES6 模組化方式撰寫時注意項目
不可將 node.js 模組化方式 (module.exports = / require()) 與 JS ES6 模組化方式 (exrpot / import default) 共用
webpack.config.js 不能使用 JS ES6 語法撰寫
自定 JS 模組推薦 JS ES6 (exrpot / import default) 模組化方式撰寫
babel 插件影響模組化開發撰寫方式，不降轉只能使用 require() 使用 ES5 方法來撰寫模組化

【webpack4 #17】Proposal class properties

正統 JS class 寫法，沒事件觸發情形下正常使用 this
點按後無法取得 JS class 的 this，this 會是點按按鈕本身
Proposal-class-properties 取得 JS class 中的 this

【webpack4 #18】babel polyfill

什麼是 babel-polyfill
安裝與設定 babel-polyfill
安裝 babel-polyfill
npm 指令安裝記錄套件參數 –save 與 –save-dev 的差別
–save-dev：開發用的套件與插件
–save：專案上線時會使用到的 plugin 插件
babel-polyfill 使用方式
webpack 使用 babel-polyfill
安裝與使用 axios
IE 11 實際使用 babel-polyfill 與 axios 相容性處理
引入 axios 模組方式
透過 axios AJAX 取得 OpenData 遠端資料
沒使用 polyfill 的 IE 11 不支援 Promise 無法使用 axios
使用 polyfill 的 IE 11 使用 axios 與配合 async & await 的 AJAX 差別

【webpack4 #19】Resolve

什麼是 resolve
透過 resolve: {modules: [], extensions: []} 的方式簡化撰寫程式碼路徑
resolve modules
用法與如何使用
路徑對照
額外新增設定
resolve extensions 用法
引入模組 import 的副檔名省略
extensions 設定多個副檔名所產生的問題
webpack.config.js 的省略處理
entry: {} 的路徑與副檔名省略
使用 JS ES6 解構處理 entry: {} 的路徑與副檔名省略後的名稱
output: {} 內的路徑與副檔名不能省略

【webpack4 #20】url loader

什麼是 url-loader
url-loader 在 webpack.config.js 中的設定與使用
安裝 url-loader
調整 Scss 取用圖片設定
加入圖檔到 src/images 資料夾中
來源檔 src 新增 images 資料夾，並將相關的圖片檔加入資料夾中
設定 path.resolve(‘src/images’), 於 resolve: [ modules: [] ]
設定 HTML 與 Scss 檔
Scss 背景圖片 url() 路徑 resolve 省略方式使用字符 ~
url-loader 處理 Scss 背景圖片設定 base64 方式與注意事項
是否所有的圖片都要以 url-loader 將轉成 base64

【webpack4 #21】Images webpack loader

安裝 images-webpack-loader
設定 images-webpack-loader
image-webpack-loade 執行壓縮圖片的前後差別

【webpack4 #22】CopyWebpackPlugin

什麼是 copy-webpack-plugin
安裝 copy-webpack-plugin
使用 copy-webpack-plugin
在 webpack.config.js 檔中載入 copy-webpack-plugin 模組
簡單使用由 src/assets 資料夾搬移至 dist/assets 資料夾
搬移字型與設定
由 CSS 引用字型檔路徑，但 loader 沒在 module: { rules: [] } 設定字型檔副檔名格式，所產生的錯誤與處理

教學主題五：Webpack開發細節處理

【webpack4 #23】ProvidePlugin

什麼是 ProvidePlugin
ProvidePlugin 在 webpack 內以模組方式使用與全域執行的情形
jQuery 與 axios 的 JS 套件，在全域下的使用情形
使用 webpack 的 ProvidePlugin 設定，在模組裡與全域下的使用情形
webpack 在注入點多或元件多的情形下使用與設定的麻煩
透過 ProvidePlugin 指定 JS 套件於變數名稱，讓所有的 .js 與元件一次設定下共用
ProvidePlugin 的設定，在 webpack 裡失去了透過模組化 js 的好處了，會有不好除錯的情形產生

【webpack4 #24】Html Webpack Plugin template

安裝 html-webpack-plugin
設定 html-webpack-plugin
調整專案資料夾結構
設定 webpack.config.js 設定檔
注入點 index.js 引入 file-loader 的 .html 檔，執行 webpack 發生錯誤修正
html-webpack-plugin 將注入點的 .js 檔，不經由模版檔的設定，動自產生在編譯後頁面上
由 html-webpack-plugin 所帶入的的設定，以參數方式加入 html haed 模版進行編譯
載入複數的 html 設定
output 編輯 .js 路徑，透過 ?[hash:8] 產生 8 碼亂數，讓每次編譯時的 .js 都產生不同的編號，讓 .js 不取用快取內原舊有 .js
額外處理的方式
透過框架來開發使用 template 模版與指定 JS 注入點
各自獨立頁面只透過 HtmlWebpackPlugin() 處理 haed 與注入點 .js 的設定來管理

【webpack4 #25】Pug轉換HTML使用

html-loader 與 pug-html-loader
什麼是 html-loader
什麼是 pug-html-loader
安裝 html-loader 插件與 pug-html-loader 外掛
更動專案資料夾結構
loader 的設定
設定 pug-html-loader 與 html-loader
html-loader 後交由 HtmlWebpackPlugin 轉出 .html 檔的設定
將 HtmlWebpackPlugin 編譯成 .html 檔時，透過 minify: {} 設定將 HTML 單行輸出

【webpack4 #26】Vendor與Entry

webpack 由 node_modules 與自行撰寫 JS 檔，合併編譯成一支 entry.js 檔所產生效能不好的問題
透過拆分 JS，將 node_modules 處理成 vendor.js，而自行撰寫 JS 的處理成 entry.js 檔，優化編譯效能
webpack.config.js 加入拆分 vendor.js 設定
由 HtmlWebpackPlugin 中將拆分的 vendor.js 自動加入 HTML 樣版中

【webpack4 #27】檔案打包與排除

include (包括) 與 exclude (排除) 設定的目地
include (包括) 與 exclude (排除) 優化 webpack 打包尋找來源檔
Scss 設定 include (包括) 與 exclude (排除) 優化
js 設定 include (包括) 與 exclude (排除) 優化
針對 pug、css、jpe?g|png|gif、woff|woff2|ttf|eot 相關資料夾，以相同的既念進行設定

【webpack4 #28】local連線dev server的host設定

直擒啟用 webpack-dev-server 是以 local serve 的方式開啟
取得啟動 webpack-dev-server 的本機 IP
設定 package.json 加入 –host

教學主題六：Webpack建構框架

【webpack4 #29】建構自己的React開發環境

【webpack4 #30】建構自己的Vue開發環境

webpack 的 vue 環境安裝套件
–save-dev (開發環境) 套件
–save (生產環境) 套件
VScode 擴充 Vuter
調整專案資料夾結構
webpack.config.js 檔設定 vue-loader 與 Scss
引入 VueLoaderPlugin
加入 vue-loader 跟 vue-style-loader，移除 include 設定
Scss 由 style-loader 改用 vue-style-loader
透過 new VueLoaderPlugin 將 vue
Vue.js 於 index.js 注入點的設定
index.js 加入 vue 本體與 vue 注入點 App.vue 檔的設定
index.html 檔中指定 #app 為 vue.js 實體操作 DOM 元素對象
設定 vue.js 注入點 App.vue 檔

參考資料

Youtube Mike – Webpack4 從零開始的前端自動化工具系列影片

Youtub 彭彭的課程：NPM 與 Webpack 前端工程專案管理