前端專案構建

目標：

1. 瞭解前端專案構建的用途
2. 掌握前端模組匯入的語法
3. 掌握Webpack構建工具的使用

前端專案構建：

1. 前端專案的構建可以理解為編譯，是要將原始碼轉化成宿主瀏覽器可以執行的程式碼，核心是對資源的管理，輸出包括JS,CSS,HTML等資源

前端專案構建的作用：

1. 解決語言問題
   （1）ES6
   （2）Sass
   （3）HTML模板語言

2. 解決效能優化問題
   （1）打包檔案模組
   （2）壓縮資原始檔

常見前端專案構建工具：

1. Gulp
   

2. Grunt
   

3. webpack
   

Webpack工具的使用

打包：

Webpack的概念：

1. 出口
2. 入口
3. Loader
4. 外掛
5. 模式

例子：

Webpack的配置檔案

1. Webpack.config.js必須儲存在專案根資料夾中

Webpack的檔案打包

1. 具體操作演示
2. 自動打包：
   （1）npm i webpack-dev-server –D
   （2）配置package.json檔案
   （3）npm run dev –啟動專案

Webpack的檔案打包

1. Main.js載入外部檔案（樣式）演示
2. 步驟：
   (1) import 外部檔案
   (2) npm i css-loader style-loader –D
   (3) 配置webpack.config.js檔案