Webpack2 相当于 html 脚本标签？

Question

我已经下载了一个 npm 模块，建议添加：

<link href="node_modules/ng2-toastr/bundles/ng2-toastr.min.css" rel="stylesheet" />
<script src="node_modules/ng2-toastr/bundles/ng2-toastr.min.js"></script>

到我的 index.html 文件。

有没有一种方法可以让我从 angular2 组件中获取与 Webpack 2 相同的引用？

例如

import 'ng2-toastr.min.js'

在组件中？

Answer 1

说明中给出的建议很奇怪。你不应该包含 <script> 标签，因为你使用的是 webpack，脚本将作为你的 webpack 包的一部分自动加载。

至于 css，您也可以使用 webpack。首先，您需要安装适当的加载程序才能加载 css 文件并将样式应用于 dom:

npm install --save style-loader raw-loader

然后在你的打字稿文件中的某处你可以做：

import 'style!raw!../node_modules/ng2-toastr/ng2-toastr.css'

（请注意，../node_modules 的相对路径可能因应用程序中的嵌套级别而异。

style!和raw!前缀是webpack通过"loaeers".

处理给定脚本的指令

raw 加载器将按原样读取 css 文件而不尝试做任何进一步处理（如果你需要做额外的事情，你可以使用 css! 加载器就像 .css 文件中的 @import，但在这种情况下没有必要，所以最简单的是原始加载程序。

style 加载程序获取由 raw 加载程序加载的 css，并以编程方式将其应用到当前页面 dom。它实际上并没有创建带有 src="url...." 的 <style> 标签，但它实现了重要的部分，即确保加载的 css 中的样式被加载到页面上。

如果您需要经常这样做，您可以随时将加载器配置添加到您的 webpack.config.js:

module: {
  loaders: [
     {test: /\.tsx?$/, loader: 'ts-loader'},
     {test: /\.css$/, loader:'style!raw'}
  ] 
}

那么你可以这样做：

import '../node_modules/ng2-toastr/ng2-toastr.css'

Webpack2 相当于 html 脚本标签？

Webpack2 equivalent of html script tags?

typescript

webpack-2

angular