@fanswoo/mix-manager

介紹

本套件以 webpack 和 laravel-mix 作為基礎並擴張更多實用的方法。

---

使用方法

透過編輯 webpack.mix.js 撰寫編譯原始碼的規則。

const { mix } = require('@fanswoo/mix-manager');

mix
  .alias({
    '@': './resources/js/',
  })
  .autoload({
    jquery: ['$', 'jQuery', 'window.$', 'window.jQuery'],
  })
  .scssPath({
    src: './resources/scss/',
    dist: 'public/css/',
    pathToDot: true,
    includePaths: [
      './resources/scss/',
      './node_modules/@fanswoo/core/resources/scss/',
    ],
  })
  .jsPath({
    src: './resources/js/controllers/',
    dist: 'public/js/controllers/',
  })
  .babel('./resources/js/service-worker.js', 'public/service-worker.js')
  .options({
    sourcemaps: false,
    processCssUrls: false,
    runtimeChunkPath: 'js',
  })
  .extract([], 'js/vendor.js')
  .watchNodeModulesPath('@fanswoo')
  .tsLoader()
  .ckeditor()
  .sourceMaps();

---

擴充方法

方法	說明
jsPath({ string })	一次編譯整個指定的資料夾內的 JavaScript、TypeScript、Vue 檔案
scssPath({ src: string, dist: string, pathToDot: boolean, includePaths: string[] })	一次編譯整個指定的資料夾內的 SCSS、CSS 檔案 pathToDot 參數會將檔案路徑轉換為以點為基礎的檔案，以維持每個檔案都在同一資料夾內，可以避免使用圖片的相對路徑問題 includePaths 參數會將指定路徑的檔案進行 import 並編譯
watchNodeModulesPath( path: string )	webpack 預設不偵測 node_modules 所有檔案的變化，若啟用此方法則可以偵測 node_modules 內的指定資料夾內所有檔案的變化
tsLoader()	啟用此方法始可編譯 TypeScript 檔案
ckeditor()	啟用此方法始可編譯 CKEditor 檔案

補充說明

更多使用方式請參考 fanswoo-framework 使用教程