webpack支持es6。webpack 2支持原生的ES6模塊語法,意味著開發(fā)者無須額外引入babel這樣的工具,就可以使用import和export。但如果使用其他的ES6+特性,仍然需要引入babel工具。
本教程操作環(huán)境:windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
模塊方法
在 webpack 打包應(yīng)用程序時(shí),你可以選擇各種模塊語法風(fēng)格,包括 ES6,CommonJS 和 AMD。
盡管 webpack 支持多種模塊語法,但我們還是建議盡量使用一致的語法,以此避免一些奇怪的行為和 bug。事實(shí)上,當(dāng)距離最近的 package.json 文件中包含值為 "module" 或 "commonjs" 的 "type" 字段時(shí),webpack 會(huì)啟用語法一致性檢查。請(qǐng)大家在閱讀前,注意此情況:
-
在 package.json 中為 .mjs 或 .js 設(shè)置 "type": "module"
-
不允許使用 CommonJS,例如,你不能使用 require,module.exports 或 exports
-
當(dāng)引入文件時(shí),強(qiáng)制編寫擴(kuò)展名,例如,你應(yīng)使用 import './src/App.mjs',而非 import './src/App'(你可以通過設(shè)置 Rule.resolve.fullySpecified 來禁用此規(guī)則)
-
-
在 package.json 中為 .cjs 或 .js 設(shè)置 "type": "commonjs"
-
import 和 export 均不可用
-
-
在 package.json 中為 .wasm 設(shè)置 "type": "module"
-
引入 wasm 文件時(shí),必須編寫文件擴(kuò)展名
-
ES6 (推薦)
webpack 2 支持原生的 ES6 模塊語法,意味著你無須額外引入 babel 這樣的工具,就可以使用 import 和 export。但是注意,如果使用其他的 ES6+ 特性,仍然需要引入 babel。webpack 支持以下的方法:
import
通過 import 以靜態(tài)的方式導(dǎo)入另一個(gè)通過 export 導(dǎo)出的模塊。
import MyModule from './my-module.js'; import { NamedExport } from './other-module.js';
Warning:
這里的關(guān)鍵詞是靜態(tài)的。標(biāo)準(zhǔn)的 import 語句中,模塊語句中不能以「具有邏輯或含有變量」的動(dòng)態(tài)方式去引入其他模塊。關(guān)于 import 的