打包工具作用是什麼？存在的意義？有哪些好處？
web前端打包工具，它能將我們前端人員寫得less,sass等編譯成css.將多個js文件合併壓縮成一個js文件。它的作用就是通過將代碼編譯、壓縮，合併等操作，來減少代碼體積，減少網絡請求。以及方便在服務器上運行。目前，會使用web前端打包工具是現代前端人員必備技能。
準備工作
安裝nodejs
windows直接下載安裝，linux可能自帶的node版本有點低需要自己安裝。
使用淘寶的cnpm包管理器
由於npm的包下載源在國外，所以安裝依賴包時速度可能會很慢，建議使用淘寶的cnpm，下載源在國內，所以速度很快。cnpm安裝方式有兩種：1、 npm install -g cnpm –registry=https://registry.npm.taobao.org
直接使用npm安裝，將以上命令輸入到終端中即可
2、若以上方式不行，建議移步cnpm網站使用第二種安裝方式
parcel使用
構建工具推薦使用parcel
首先通過 Yarn 或者 npm 安裝 Parcel ：
Yarn:
yarn global add parcel-bundlernpm:
npm install -g parcel-bundler
在你正在使用的項目目錄下創建一個 package.json 文件：
yarn init -yor
npm init -yParcel 可以使用任何類型的文件作爲入口，但是最好還是使用 HTML 或 JavaScript 文件。
接下來，創建一個
index.html和index.js文件。Parcel 內置了一個當你改變文件時能夠自動重新構建應用的開發服務器，而且爲了實現快速開發，該開發服務器支持熱模塊替換。只需要在入口文件指出：
parcel index.html現在在瀏覽器中打開
http://localhost:1234/具體看官網parcel中文網
san使用
安裝san
建議直接使用網頁外聯js文件的方式，簡單迅速。
開發版本：
<script src="https://unpkg.com/san@latest/dist/san.dev.js"></script>建議在開發環境不要用生產版本，開發版本提供了有助於開發的錯誤提示和警告！
具體看官網san官網
任務描述
支持js、css格式的解析
這個parcel自帶支持，webpack需要配置插件，所以如果你使用parcel就自動完成這個任務了。這裏再提下parcel的優點，parcel會自動根據你引入的文件來安裝所需的插件，所以如果想使用less或者其他css預處理語言，直接在網頁引入相應的文件，parcel在構建時會自動處理一切事情，例如使用less
<link rel="stylesheet" href="./index.less"><!-- 直接在head標籤裏引入less文件即可 -->區分 development / production 環境
這裏注意區分你的san文件的版本，開發時一定要使用開發版本，這樣會大幅度提高你定位錯誤的能力。
使用npm scripts設罝dev、test、build命令
這裏只談parcel的配置方法,在package.json文件裏這樣配置即可
其中 index.html 請對應替換成你的入口文件
"scripts": { "test": "echo "Error: no test specified" && exit 1", "start": "parcel index.html", "dev": "npm run start", "build": "parcel build index.html" }寫一個san組件並在瀏覽器中顯示hello world
移步san文檔
使用babel-loader進行js代碼轉換
這裏只介紹parcel的使用方法，對比webpack來說，真是灰常簡單
使用npm或者cnpm安裝babel-preset-env即在終端中輸入以下命令
npm i -D babel-preset-env然後在與package.json文件相同目錄下新建一個文件名爲 .babelrc 的文件並輸入以下配置，parcel便會在構建時自動配置
{ "presets": [ "env" ] }
注意引入script的位置
錯誤的引入位置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script src="https://unpkg.com/san@latest/dist/san.dev.js"></script>
<script src="./index.js"></script>
</head>
<body>
</body>
正確的引入位置與順序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
<script src="https://unpkg.com/san@latest/dist/san.dev.js"></script>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>