webpack支援es6嗎

webpack支援es6。 webpack 2支援原生的ES6模組語法，表示開發者無須額外引入babel這樣的工具，就可以使用import和export。但如果使用其他的ES6 特性，仍然需要引入babel工具。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

模組方法

---

在 webpack 打包應用程式時，你可以選擇各種模組語法風格，包括 ES6，CommonJS 和 AMD。

儘管 webpack 支援多種模組語法，但我們還是建議盡量使用一致的語法，以此避免一些奇怪的行為和 bug。事實上，當距離最近的 package.json 檔案中包含值為 "module" 或 "commonjs" 的 "type" 欄位時，webpack 會啟用語法一致性檢查。請大家在閱讀前，注意此狀況：

• 在 package.json 中為 .mjs 或 .js 設定 "type": "module"

  • #不允許使用CommonJS，例如，你不能使用require，module.exports 或exports

  • 當引入檔案時，強制編寫副檔名，例如，你應該使用import '. /src/App.mjs'，而非import './src/App'（你可以透過設定Rule.resolve.fullySpecified 來停用此規則)

• 在 package.json 中為 .cjs 或 .js 設定 "type": "commonjs"

  • import 和export 皆不可用

• ##import 和export 皆不可用

  • 在 package.json 中為 .wasm 設定 "type": "module"

引入wasm 檔案時，必須撰寫檔案副檔名

---

ES6 (推薦)

webpack 2 支援原生的ES6 模組語法，表示你無須額外引入babel 這樣的工具，就可以使用import 和export。但請注意，如果使用其他的 ES6 特性，仍然需要引入 babel。 webpack 支援以下的方法：

import

透過 import 以靜態的方式導入另一個透過 export 導出的模組。

import MyModule from './my-module.js';
import { NamedExport } from './other-module.js';

Warning：

這裡的關鍵字是靜態的。在標準的 import 語句中，模組語句中不能以「具有邏輯或含有變數」的動態方式去引入其他模組。關於 import 的更多資訊和 import() 動態用法。 你也透過 import 來引入Data URI：

import 'data:text/javascript;charset=utf-8;base64,Y29uc29sZS5sb2coJ2lubGluZSAxJyk7';
import {
  number,
  fn,
} from 'data:text/javascript;charset=utf-8;base64,ZXhwb3J0IGNvbnN0IG51bWJlciA9IDQyOwpleHBvcnQgY29uc3QgZm4gPSAoKSA9PiAiSGVsbG8gd29ybGQiOw==';

export

預設為整個模組或具名導出模組。

// 具名导出
export var Count = 5;
export function Multiply(a, b) {
  return a * b;
}

// 默认导出
export default {
  // Some data...
};

import()

#function(string path):Promise

## 動態的加載模組。呼叫 import 的之處，被視為分割點，意思是，被請求的模組和它引用的所有子模組，會分割到一個單獨的 chunk 中。

Tip：

ES2015 Loader 規格 定義了 import() 方法，可以在執行時間動態地載入 ES2015 模組。

if (module.hot) {
  import('lodash').then((_) => {
    // Do something with lodash (a.k.a '_')...
  });
}

Warning：

import() 特性依賴內建的 Promise。如果想要在低版本瀏覽器中使用 import()，記得使用像 es6-promise 或 promise-polyfill 這樣 polyfill 函式庫，來預先填入(shim) Promise 環境。

import() 中的表達式

#不能使用完全動態的 import 語句，例如 import(foo)。是因為 foo 可能是系統或專案中任何檔案的任何路徑。

import() 必須至少包含一些關於模組的路徑資訊。打包可以限定於一個特定的目錄或檔案集，以便於在使用動態表達式時 - 包括可能在 import() 呼叫中請求的每個模組。例如， import(`./locale/${language}.json`) 會把 .locale 目錄中的每個 .json 檔案打包到新的 chunk 中。在執行時，計算完變數 language 後，就可以使用像 english.json 或 german.json 的任何檔案。

// 想象我们有一个从 cookies 或其他存储中获取语言的方法
const language = detectVisitorLanguage();
import(`./locale/${language}.json`).then((module) => {
  // do something with the translations
});

Tip：

使用 webpackInclude and webpackExclude 選項可讓你新增正規表示式模式，以減少 webpack 打包導入的檔案數量。

Magic Comments

內嵌註解使此特性得以實現。透過在 import 中新增註釋，我們可以進行諸如給 chunk 命名或選擇不同模式的操作。

// 单个目标
import(
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackExports: ["default", "named"] */
  'module'
);

// 多个可能的目标
import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  `./locale/${language}`
);

import(/* webpackIgnore: true */ 'ignored-module.js');

webpackIgnore

：設定為 true 時，停用動態導入解析。

###Warning：######注意：將 webpackIgnore 設為 true 則不進行程式碼分割。 ###

webpackChunkName: 新 chunk 的名稱。從 webpack 2.6.0 開始，佔位符 [index] 和 [request] 分別支援遞增的數字或實際的解析檔名。新增此註解後，將單獨的給我們的 chunk 命名為 [my-chunk-name].js 而不是 [id].js。

webpackMode：從 webpack 2.6.0 開始，可以指定以不同的模式解析動態導入。支援以下選項：

• 'lazy' (預設值)：為每個import() 匯入的模組產生一個可延遲載入（lazy-loadable）的chunk。

• 'lazy-once'：產生一個可以滿足所有 import() 呼叫的單一可延遲載入（lazy-loadable）的 chunk。此 chunk 將在第一次 import() 時呼叫時獲取，隨後的 import() 則使用相同的網路回應。請注意，這種模式僅在部分動態語句中有意義，例如 import(`./locales/${language}.json`)，其中可能含有多個被要求的模組路徑。

• 'eager'：不會產生額外的 chunk。所有的模組都被當前的 chunk 引入，並且沒有額外的網路請求。但仍會回傳一個 resolved 狀態的 Promise。與靜態導入相比，在呼叫 import() 完成之前，該模組不會被執行。

• 'weak'：嘗試載入模組，如果該模組函數已經以其他方式加載，（即另一個chunk 導入過此模組，或包含模組的腳本被載入）。仍會傳回 Promise， 但只有在客戶端上已經有該 chunk 時才會成功解析。如果該模組不可用，則傳回 rejected 狀態的 Promise，且網路請求永遠不會執行。當需要的 chunks 始終在（嵌入在頁面中的）初始請求中手動提供，而不是在應用程式導航在最初沒有提供的模組導入的情況下觸發，這對於通用渲染（SSR）是非常有用的。

webpackPrefetch：告訴瀏覽器未來可能需要該資源來進行某些導航跳轉。

webpackPreload：告訴瀏覽器在目前導航期間可能需要該資源。

webpackInclude：在導入解析（import resolution）過程中，用於匹配的正規表示式。只有匹配到的模組才會被打包。

webpackExclude：在導入解析（import resolution）過程中，用於匹配的正規表示式。所有符合的模組都不會被打包。

webpackExports: 告知 webpack 只建構指定出口的動態 import() 模組。它可以減少 chunk 的大小。從 webpack 5.0.0-beta.18 起可用。

【相關推薦：javascript學習教學】

#

以上是webpack支援es6嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！