webpack-這些導入語句有何不同？

Question

假設使用webpack 2和typescript，這些語句之間的區別到底是什么。

import "moment";
import "imports-loader?window=>this!moment";
import "script-loader!moment";
import * as moment from "moment";
import { moment } from "moment";

對於webpack 2到底發生了什么...
盡管瀏覽了（恕我直言不好的）文檔，但對我來說還不是很清楚。

例如，我發現使用script-loader似乎使某些庫可用於通過script-loader導入的其他庫，但並未將其放入其他ES6導入庫的全局范圍。

供參考：我的tsconfig.json看起來像這樣：

{
  "compileOnSave": true,
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "pretty": true,
    "lib": [ "es6", "dom" ],
    "types": []
  },
  "exclude": [
    "node_modules", "wwwroot/lib", "bower_components"
  ]
}

Answer 1

三種形式：

import "moment";
import * as moment from "moment";
import { moment } from "moment";

• import "moment";

導入副作用文件。

• import * as moment from "moment";

將完整模塊作為命名moment導入文件中

• import { moment } from "moment";

進口名為 export moment從模塊moment 。

更多

閱讀有關ES6導入/模塊語法的信息🌹

Webpack

Webpack還允許您在導入中使用加載程序，例如

import "imports-loader?window=>this!moment";
import "script-loader!moment";

這些內容在各個加載程序文檔中都有介紹，例如https://github.com/webpack-contrib/imports-loader