- Webpack 官網 : https://webpack.js.org/
- 關於 Webpack : https://askie.today/what-is-webpack/
- Webpack 是什麼 : https://tw.alphacamp.co/blog/webpack-introduction
- NPM 官網 : https://www.npmjs.com/ -> 檢查 NPM 版本: npm -v
- Node.js 官網 : https://nodejs.org/en/ -> 檢查 Node.js 版本: node -v
- 專案初始化:npm init
- package name : 預設(npm-demo)
- version : 預設(1.0.0)
- description : 描述
- entry point : 預設(index.js)
- test command : 測試code
- git repository : 使用git版控
- keywords : 關鍵字
- author : 作者
- license : 版本號(ISC)
- 專案初始化,並提供預設值: npm init -y
安裝 Webpack 套件指令:npm install webpack webpack-cli --save-dev
Webpack Output 參考 : https://webpack.js.org/concepts/#output
- 開發模式 mode : "dev": "webpack --mode development"
- 上線模式 mode : "deploy": "webpack --mode production"
- development(開發)依賴模組: npm install 模組名稱 --save-dev
- production (上線)依賴模組: npm install 模組名稱 --save
Webpack css-loader 參考 : https://webpack.js.org/loaders/css-loader/
- npm install --save-dev css-loader
- npm install --save-dev style-loader
Webpack Sass-loader 參考 : https://webpack.js.org/loaders/sass-loader/#root
- npm install sass-loader sass --save-dev
node-sass 初探 : https://dwatow.github.io/2018/03-12-node-sass/
- sass 是使用純 JavaScript 編譯
- node-sass 則是基於 Node.js 來控制 LibSass 的方式來運作,因此底層是以 LibSass (C++ 編寫的 Sass 編譯器 ) 來編譯
- 兩者主要差異在於編譯效能,由於 sass 是使用純 JS 編譯,相較 node-sass 透過 LibSass 編譯速度來得較差
Webpack-dev-server 參考 : https://webpack.js.org/api/webpack-dev-server
- npm install --save-dev webpack-dev-server
Webpack.config.js 環境建立 devServer 設定 : https://webpack.js.org/configuration/dev-server/#root
npm axios : https://www.npmjs.com/package/axios
- npm install axios --save