上一篇我們在介紹webpack是什麼東西（沒看過趕快去看XD），接下來我們來談談細節的配置，我們已經可以做基本的輸出了，上篇教學説我們會分兩個資料夾src跟dist，src是指我們的開發檔案，輸出到dist是編譯過後的檔案，但是要怎麼指定src跟dist輸出的路徑呢？

首先你要了解webpack是建立在nodejs上面的工具，webpack只負責編譯，搬檔案就要靠nodejs的api來幫忙啦！

nodejs 要搬移任何的檔案都要靠一個叫path的api來做（文件在此）所以我們來看，首先要在webpack.config.js 用 require 的方式來引入path的模組。

var path = require(‘path’);

然後在module.exports裡一開始加入 context這個屬性，裡面使用path.resolve 這個方法來指定一開始的路徑

context: path.resolve(__dirname, ‘src’),

__dirname在nodejs裡面代表的一個特殊的變數，只的是當前執行文件所在目錄的完整目錄位置，所以我們要設定path.resolve第一個參數__dirname，然後指定第二個參數，從src資料夾開始找檔案。

這是目前的webpack.config.js設定

（此區塊有程式碼無法顯示，文末有連結可回到原文查看！）

好啦！實際跑跑看，開終端機跑

> npm run build

記得你的package.json 的script ，如果不知道請參考上一篇文章

 

編譯過程

 

它會自動幫你放入dist資料夾內（預設）

但是今天你想要輸出不是在dist資料夾內呢？

有些時候我們跟後端配合專案會需要把檔案自動給放到其他資料夾內，而不是dist，那要怎麼做？

這時候我們可以在 output 設定裡面重新指定路徑，像這樣

（此區塊有程式碼無法顯示，文末有連結可回到原文查看！）

path: path.resolve(__dirname, ‘App’),

重新執行

> npm run build

 

你會看到新build出來的檔案在名叫App的資料夾內

這樣你就成功的可以指定打包出來的路徑，想讓檔案去哪裡就哪裡！

最後

webpack還有很多好用且方便的功能，日後我會一一介紹到，幫助大家更了解webpack。