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相同的引用？

e.g。

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通过＆＃34; loaeers＆＃34; 处理给定脚本的说明。

raw加载器将按原样读取css文件，而不尝试进行任何进一步处理（如果需要执行css!之类的附加操作，可以使用@import加载程序来自.css文件，但在这种情况下没有必要，所以最简单的是原始加载器。

style加载器获取raw加载器加载的css，并以编程方式将其应用于当前页面dom。它实际上并不创建带有<style>的{{1}}标记，但它实现了重要的部分，即确保加载的css中的样式加载到页面上。

如果您经常需要这样做，您可以随时将加载程序配置添加到src="url...."：

webpack.config.js

然后你可以这样做：

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

Webpack2相当于html脚本标签？

1 个答案: