Path檔案路徑設定

Posted on | In

開發時，往往都有一個src的資料夾，裡面放的都是未經編譯的開發檔案
且通常不會將預處理檔案與webpack放在同一個階層

使用webpack編譯時，將打包後的資料放進預設dist裡
又今日檔案階層不同、資料夾來源不同等等… 就要進行路徑調整

重點：以下兩個分別是node.js的方法與環境變數

path.resolve()

  1. path是node.js用來處理跟“路徑”有關的方法，方會用到的API
  2. resolve是用來將相對路徑或路徑片段解析成絕對路徑
  3. webpack官方推推的方法

__dirname

  1. 前方有兩個底線，其為node.js的全域環境變數
  2. 指的是當前執行文件所在目錄位置

實作調整路徑

Step1: 用require 的語法將node.js 環境裡面的path方法拿進webpack裡面使用 

1
var path = require("path");

Step2: 用context來指定entry的資料夾

1
2
3
4
5
6
7
8
module.exports = {
  context: path.resolve(__dirname, "./src”),  // path.resolve(當前目錄位置, 指派的相對路徑) => 系統絕對路徑
  entry: './index.js', // 進入點
  output: {
      path: path.resolve(__dirname, "./dist"),
      filename: 'index-bundle.js'
  }
}

Step3: 將編譯後的檔案放置指定資料夾

1
2
3
4
5
6
7
8
module.exports = {
  context: path.resolve(__dirname, "./src”),  // path.resolve(當前目錄位置, 指派的相對路徑) => 系統絕對路徑
  entry: './index.js', // 進入點
  output: {
      path: path.resolve(__dirname, "./dist"),
      filename: 'index-bundle.js'
  }
}