# 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>
  ```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jim-5.gitbook.io/vue-js/webpack.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.