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";

从模块 moment 导入 named export moment。

Webpack 还允许您在导入中使用加载程序，例如

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

这些在各个加载程序文档中都有介绍，例如https://github.com/webpack-contrib/imports-loader

webpack - 这些导入语句有何不同？

webpack - how do these import statements differ?

javascript

typescript

webpack

webpack-2

更多

Webpack