20hrs

學完 vendor bundling 之後，接下來也要把 CSS 一起塞進 webpack 裡做模組化概念。 總之先安裝相關的 package npm install --save-dev css-loader style-loader 接著在自己的 JS 裡，就可以 import CSS 檔 import './module-1.css' ; 老樣子需要去 webpack.config.js 裡做些設定 // in webpack.config.js var path = require('path'); var webpack = require('webpack'); module.exports = { context: path.resolve(__dirname, './src'), entry: { main: './main.js', vendor: ['lodash'] }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js' }, module: { rules: [ { test: / \. css $ / , // webpack 預設只認 JS 檔，透過這個可加入辨認 CSS use: [ 'style-loader' , 'css-loader' ] // 從後往前 load，此例會先 load css-loader } ] }, plugins : [ new webpack.optimize....

WEBPACK @ MODERN WEB AND APP PROGRAMMING 之後，開始進入到 vendor bundling 的概念 以下參考 這部影片 當有二個以上 entry point 時，可以如下寫法 module . exports = { context: path . resolve ( __dirname , './src' ), entry: { main: './main.js' , module: './module-1.js' }, output: { path: path . resolve ( __dirname , 'dist' ), filename: '[name].bundle.js' } }; 這時就會發生一個問題，例如 main.js module-1.js 都有 import lodash 產生 bundling 時，自然也就會產出二個 bundle js，裡面都有 lodash 這時就需要 vendor bundling 了 前往 webpack.config.js 編輯如下 // in webpack.config.js var path = require('path'); var webpack = require ( 'webpack' ); module.exports = { context: path.resolve(__dirname, './src'), entry: { main: './main.js', module: './module-1.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].bundle.js' }, plugins : [ new webp...

繼 安裝完 node.js & NPM 之後，就可以來學習 webpack 了。 另外也可以參考 這篇 Webpack 中文指南 以下內容對應到 這個影片 使用 npm 指令安裝 webpack npm install --save-dev webpack 準備好檔案後，可以使用這個指令做包裝 ./node_modules/.bin/webpack src/main.js dist/main.bundle.js // ./node_modules/.bin/webpack <從哪個檔案開始分析起> <輸出包到哪個檔案> 也可以新增 webpack.config.js 檔，以後直接呼叫執行 // in webpack.config.js var path = require ( 'path' ); module . exports = { context: path . resolve ( __dirname , './src' ), // __dirname 代表 webpack.config.js 所在的資料夾 entry: { main: './main.js' }, output: { path: path . resolve ( __dirname , 'dist' ), filename: '[name].bundle.js' // [name] 表示 entry point 的 key 值，此例為 main } }; 另外還有在 package.json 裡的 script 增加下面，就可以搭配 npm run build 指令，不用再打上面一長串 "scripts" : { "build" : "webpack" }, 執行看看就會獲得一樣效果 npm run build // build 為指令名稱 有時候 code 會很頻繁的修改，為了...

因緣際會下決定重新學習網頁前端設計。 打算學習的方向是 HTML5 、CSS 3、Bootstrap、Javascript、React、React Navtive，重點是要熟悉 JS。 現在的網頁和八年前剛畢業所學的已經完全是另一個生態系了。 也只好從頭來過。好險很多概念基本上不變的。 目前打算首先從這篇開始 清大資工系教授的 Modern Web and App Programming https://nthu-datalab.github.io/webapp/index.html 免費 接著是 Udemy - The Complete JavaScript Course: Build a Real-World Project https://www.udemy.com/the-complete-javascript-course/ NTD $300 Udemy - JavaScript 全攻略：克服 JS 的奇怪部分 https://www.udemy.com/javascriptjs/ NTD $300 之後會在這裡將學習時間做個記錄。 https://time.graphics/line/d4720b9777f9dbb4bdbd1981f7c4fdd9