> For the complete documentation index, see [llms.txt](https://information9527.gitbook.io/html/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://information9527.gitbook.io/html/qi-ta-js-gong-ju/node.js/webpack.md).

# webpack

## 參考文章

{% embed url="<https://webpack.js.org/>" %}

{% embed url="<https://neighborhood999.github.io/webpack-tutorial-gitbook/Part1/>" %}

{% embed url="<https://www.youtube.com/watch?v=uP6KTupfyIw>" %}

## webpack

Webpack 簡稱為模組整合工具。如果你想要深入的話，可以拜訪 [JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc#.jw1txw6uh) 和 [JavaScript Modules Part 2: Module Bundling](https://medium.com/@preethikasireddy/javascript-modules-part-2-module-bundling-5020383cf306#.lfnspler2) 這兩篇優秀的解釋文章：

我們要保持它的簡單，webpack 運作的方式是透過指定一個單一檔案作為你的進入點。 這個檔案會是 tree 的 root。然後你每次 `require` 一個檔案從其他檔案並把它加入到 tree。當你執行 `webpack`，所有的檔案和 module 都會被 bundle 成一個檔案。

### 專案結構

一般我們的專案會有兩個很重要的資料夾src與dist，這兩個資料夾是什麼？

* src : 專門放我們Preprocess的檔案，包括es6、pug、sass、vue、jsx等檔案，這個資料夾不會丟上去server部署。
* dist : 經過webpack編譯打包後，產生出瀏覽器看得懂的html、css、js，要部署也是這個資料夾去部署。

![](/files/-MjE0YiPO8xQC7JOUt2f)

會看到src的資料夾裡面有許多資料夾，這個是我自己的分類方式，每個人的都多少會不一樣，僅供參考啦～

像這樣的開發方式就像是現代前端的開發方式，我們就可以專心的用去多好用的Preprocess，不用去管最後的編譯成果！

## 開始使用

### 創建package.json&#x20;

接下來我們要來用npm來創建一個`package.json`輸入

```
npm init -y
```

![](/files/-MjE1OurGb6GK_9aU0aZ)

終端機下面依序輸入以下指令來安裝webpack (這邊我們透過nodejs的套件管理工具npm來進行安裝，安裝好nodejs後及安裝好npm，所以可以直接使用npm指令來安裝webpack)

### 安裝npm 套件

可以輸入以下兩種

1\.

```
npm install webpack webpack-cli --save-dev
```

2\.

```
npm install webpack --save-dev
```

![](/files/-MjE1tLOWPi69eumvD31)

他會幫你的資料夾下面創立一個package.json，所以現在你的專案資料夾裡面應該會有一個資料夾跟兩個json檔案

* node\_modules ：就是我們透過npm下載下來的套件跟工具都會放在這個資料夾裡面，剛剛我們下載下來的webpack還有跟webpack有關係的套件都會在這資料夾裡面<br>
* package.json：關於這整包專案所有的資訊，包含我們安裝的套件版本，專案版本，npm指令都可以在這個json檔案裡面找得到，之後要搬移專案重新安裝套件也需要靠這個json檔案

![](/files/-MjE206VHTb4K5b94y0p)

### 創建src

創建一個src 資料夾底下index.js 任意輸入內容

![](/files/-MjE2gpY9W4cc-A9BgPu)

```javascript
const profile = {
  name: 'John',
  desc: 'First Webpack',
};

console.log(`Hi! My name is ${profile.name}`);
console.log(`position is ${profile.desc}`);
```

將 package.json 打開後，修改方式如下:

主要修改scripts 位置，改為build:"webpack"即可。

```javascript
{
  "name": "Webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^5.52.1"
  },
  "devDependencies": {
    "webpack-cli": "^4.8.0"
  }
}

```

### 編譯js 檔案

```
npm run build 
```

按下去後就會進行js編譯，到這邊恭喜你就成功的打包了你第一個 js 檔案，所以透過webpack的轉換我們可以寫許多各式各樣的Preprocess來輔助我們開發網頁，當然webpack.config.js的設定還不只那一點點，還有更多強大的功能跟使用方式，不過那就留到之後再說吧，目前想讓入門的人有個基礎觀念，跟能稍微簡單地用一下～

![](/files/-MjE3oi1P5VvMmed8Wea)