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

# webpack

> * **使用webpack要先安裝Node.js及NPM**
> * **在webpack裡，一張圖片、一個css甚至一個字型都稱為模組，他們彼此相依。webpack會處理彼此的相依並進行包裝。**
> * **webpack適用在SPA。SPA通常是一個html檔案和一堆的js及檔案組成。**
> * **webpack對使用者而言，只是一個js的設定檔。內含入口(entry)、出口(output)、載入器(loaders)、外掛程式(plugin)四個概念。**
>   * loaders:針對不同的副檔名的檔案，要安裝並指定不同的loader進行處理。
>   * plugin:匯總css檔案，並重新命名。壓縮js檔案。定義生產環境。儲存入口html。

* **webpack基本設定**
  * **建立一個目錄，初始化該目錄**

    ```javascript
    npm init
    ```
  * **在本機局部安裝webpack**

    ```javascript
    npm install webpack --save-dev
    ```
  * **安裝webpack-dev-server**

    ```javascript
    npm install webpack-dev-server --save-dev
    ```
  * **在目錄內，建立一個webpack設定檔。webpack.config.js**

    ```javascript
    var config={
      //...
    }
    module.exports=config;
    ```
  * **在package.json的script裡增加快速啟動webpack-dev-server服務的指令。**

```javascript
        {
            //...
            "script":{
                "test":"echo \"Error:no test specified\" && exit 1",
                "dev":"webpack-dev-server --open --config webpack.config.js"
            },
            "build":{
                //...
            }

        }

        //當執行npm run dev指令時，就會執行該行dev命令。
        npm run dev

        //最終處理
        npm run build
```

* **在目錄下新增一個空的main.js作為入口的檔案，指後在webpack.config.js中進行入口和輸出的設定。**
* **在webpack中使用vue-loader就可以對.vue格式的檔案進行處理。一個vue檔案分3部份。**

  ```javascript
    <template></template>
    <script></script>
    //使用scoped那麼CSS的樣式只在此元件有效
    <style scoped></style>
  ```