在前一篇文章提到，有愈來愈多開源套件，可以幫助我們加速開發。當功能愈來愈多，將所有程式碼都寫在同一個 JS 檔案中會難以管理。
如果能以模組化的方式進行開發，將程式碼拆開成不同的檔案，讓每個檔案各自串聯所使用到的程式碼或套件，不只可以加速網頁載入，也更可以提升專案的維護性。為了在瀏覽器上達成這樣的模組化開發，就有了 webpack 這樣的打包工具出現。
如所說的：Webpack 是一個「打包工具」，將各種模組套件和資源打包成一個檔案，讓瀏覽器能夠正常編譯模組化的程式碼。它可以做到：
import 引入 npm packages
讓我們直接用一個範例來演示 webpack 是如何打包的，首先在 test.js ，有一個要在 index.js 使用的函式 test()：
test.js
export default function test() {
return "hello"
}
index.js
document.getElementById('target').innerText = test();
在 HTML 加入 Script，目前需要同時引入 test.js 才能在 index.js 使用 test()：
index.html
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<div id="target"></div>
<script src="./test.js"></script>
<script src="./index.js"></script>
</body>
</html>
透過 npm 安裝 webpack、webpack-cli：
npm init
npm install webpack webpack-cli --save-dev
設定配置檔 webpack.config.js，告訴 webpack 該如何編譯和打包程式碼：
module.exports = {
mode: "development",
entry: "./index.js",
output: {
path: __dirname,
filename: "bundle.js",
},
};
mode：可以設定執行模式為 development 或 production。entry：設定入口文件為 index.jsoutput：輸出的相關設定path：指定打包後輸出文件的目錄filname：打包輸出的檔名建立 webpack 的配置檔後，修改一下先前的範例，改成直接在 index.js 使用 import 引入 test()。
index.js
import test from './test.js'
document.getElementById('target').innerText = test();
在 package.json 的 scripts 屬性新增執行指令：
"scripts": {
"start": "webpack"
},
接著就可以輸入指令執行 webpack 打包檔案囉
npm run start
依照上面視窗顯示的執行畫面，webpack 會將 index.js 和 test.js 一併打包成指定的檔案 bundle.js，這樣 HTML 就只要引入這一份程式碼，就可以有和之前分別引入兩份 script 相同的效果。
index.html
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<div id="target"></div>
<script src="./bundle.js"></script>
</body>
</html>
在一開始有提到可以引入任何類型的檔案，例如：圖片檔、CSS等等， 而 webpack 會透過 Loader 將這些檔案進行預處理，才能成功加載這些文件。
舉例來說，要引入的是 CSS 檔，首先安裝會使用到 style-loader 和 css-loader。並且一樣設定配置檔，讓 webpack 知道該怎麼處理 CSS 類型的檔案：
npm install --save-dev style-loader css-loader
webpack.config.js
...,
module: {
rules: [
{
test: /\.css$/, //結尾是.css的檔案
use: ["style-loader", "css-loader"]
}
]
}
接下來新增 CSS 樣式，直接把檔案引入 JS：
style.css
body {
background-color: #ffcccc;
}
index.js
import './style.css';
成功！
希望到這邊大家都能了解使用 webpack 的理由，以及如何使用 webpack 進行模組化開發。下一篇文章，就會進入到 React 框架，我們會使用到一些套件，並且用模組化的方式進行開發，那就下章再見囉！
如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️
iThome鐵人賽
看影片追技術