webpack與css Modules學習

[dalice157]

DEMO Link

markdown

參考網址

• [x] 研究 markdown
• [x] 練習 markdown

  Webpack

  create-react-app 設定及建構

• [x] 建構一個新的create-react-app，及做 npm run eject 來解構
• [x] package.json 的 dependencies 做升級，包含以下( install 的套件後面皆用@latest才能更新最新版本)
• [x] webpack.config.dev 做調整如下:
  1. resolve -> alias新增 ：'ui': path.resolve(__dirname, '../src/components/ui')
  2. css-loader-> options 新增：modules: true, localIdentName: '[name]__[local]'

     Webpack 4 設定

• [x] Webpack 從 3 升級至 4
• [x] 研究 Webpack 3 與 Webpack 4 的差別
• [x] 研究 create-react-app 如何升級至 Webpack 4
• [x] 嚐試升級到4

  CSS Modules

• [x] 在資料夾新增 components/ui
• [x] 在 ui 新增button資料夾，裡面包含 button.js 及 button.css
• [x] 在button.js 做 CSS Modules 的測試
• [x] 與 @wenchien213 討論如何協作及教學

  NodeJs

  因外包POC遇到打包後JS出現ES6的語言，尋找到原來有分Node模組與browser端的package

• [x] 查到JOI不能使用在browser上，研究 joi-browser 如何加到webpack

[vincentliu104]

要提到人可以用 @wenchien213

[dalice157]

okok～已修改

[dalice157]

已學習完畢