跳至主要内容

[note] Webpack 常用 modules

過時內容

此頁面的套件名稱為舊版 Babel 的用法。現代 Babel（7+）已改用 scoped packages：babel-core → @babel/core，babel-preset-es2015 → @babel/preset-env，babel-plugin-transform-runtime → @babel/plugin-transform-runtime。請參考 Babel 官方文件 取得最新資訊。

babel​

  • babel-core: babel 核心程式，知道如何載入程式碼、解析和輸出檔案（但不包含編譯）。現代用法：@babel/core。
  • babel-loader: 用來告訴 babel 如何和 webpack 合作。
  • babel-preset-es2015: 讓 babel 知道如何將不同版本的 ES 語法進行轉譯。現代用法：@babel/preset-env。
  • babel-plugin-transform-runtime: 預設 babel 會在每一隻編譯檔案注入 polyfill 的程式碼，為了避免重複而將這部分抽出去，詳細說明。現代用法：@babel/plugin-transform-runtime。

css​

  • css-loader: 告訴 webpack 如何匯入和解析 css 檔案。
  • style-loader: 將匯入的 css 內容注入 HTML 的 中

圖片處理​

  • file-loader: webpack 使用於處理檔案
  • image-webpack-loader
  • url-loader: 編譯匯入檔案類型的資源，把檔案轉成 base64

dev-server​

  • webpack-dev-server

vue​

  • vue-loader: 使用 Vue Component Spec
  • vue-hot-reload-api: 支援 hot reload

其他​

  • webpack-merge: 合併 webpack 設定參數
  • webpack-dev-middleware：可以將 webpack 打包好的檔案內容直接丟到 express server 使用