使用webpack有什么用？

Question

我试图在ng-book2的帮助下学习angular2 在app.ts中有一段我不明白的代码片段：

require('../css/styles.css');
require('../css/semantic.min.css');
require('../images/ng-book-2-minibook.png');
require('../images/favicon-32x32.png');
require('../images/favicon.ico');

1. 为什么他们需要css，png文件？

2. 他们为什么这样做？

Answer 1

不是在html中为你的css添加链接，你可以直接在js中导入它们并使用它们和webpack将它们捆绑在你的构建中。它使许多工作变得容易，并为您提供良好的工作流程。您使用webpack作为mudule bundler，这也是webpack的一部分。假设你有一个组件，并且你想给出一些样式，这样你就可以制作一个样式表，但不是在html中声明它，而是只需要在该组件中使用它并使用它。

一个例子

import { Component , ViewEncapsulation } from "@angular/core";

@Component({
    directives: [],
    encapsulation: ViewEncapsulation.None,
    selector: "sg-app",
    styles: [require("./app.styles.css").toString()],//importing styles here
    templateUrl: "./app.template.html",
})
export class AppComponent {
 public id: string = "fd";
}

模板

<footer class="footer">Mr.JS</footer>在此使用

我的风格

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

需要做什么？

它将CSS，JS和HTML合并为一个。这就像导入一个库。