前端開發中，JavaScript（簡稱JS）和CSS被廣泛應用在各種網站和應用程序中。隨著項目逐漸增多，代碼逐漸變得龐大復雜，打包工具就顯得越來越重要。JavaScript和CSS的打包主要分為兩種：前端構建工具和服務器端構建工具。

前端構建工具主要是通過打包構建工具將多個JavaScript和CSS文件合并成一個文件來提高性能和減少HTTP請求。常用的前端構建工具有webpack、rollup、parcel等。以下是webpack打包示例：

// 入口文件 app.js
import bar from './bar';
bar();
// bar.js文件
export default function bar() {
console.log('Hello, webpack!');
}

執行webpack命令后，會生成dist目錄和打包好的文件：

dist/
|- bundle.js

服務器端構建工具則主要是用于CSS文件的打包，通過將多個CSS文件合并成一個，從而減少HTTP請求。常用的服務器端構建工具有Sass、Less、PostCSS等。以下是使用Sass打包示例：

// style.scss文件
@import 'reset';
body {
background: $white;
color: $gray;
}
// reset.scss文件
$white: #fff;
$gray: #ccc;

執行編譯命令后，會生成style.css文件：

style.css

綜上所述，JS和CSS打包工具可以使得我們的代碼更加優化和高效，提高性能和用戶體驗。