Angular CLI和Webpack
[英]Angular cli and webpack
问题描述
Having a play round with angular cli https://github.com/angular/angular-cli#documentation 
与angular cli一起玩一局https://github.com/angular/angular-cli#documentation
I can create a simple app and view it at localhost. 我可以创建一个简单的应用程序并在本地主机上查看。
If I inspect the localhost site I can see the css and js links inserted by webpack. 如果检查本地站点，则可以看到webpack插入的css和js链接。
How are these added when the index.html looks like this 当index.html看起来像这样时如何添加这些
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Wpng</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Also I cant see any webpack.config.js in the files so how is webpack used 我也看不到文件中的任何webpack.config.js，所以如何使用webpack
2 个解决方案
解决方案1
3 2017-04-20 19:45:32
The Angular CLI is handling the webpack.config file internally. Angular CLI正在内部处理webpack.config文件。 If you want to see it and work with it manually, you can use the ng eject option. 如果要查看并手动使用它，可以使用ng弹出选项。
See this answer for more information: angular-cli where is webpack.config.js file - new 2017-Feb: ng eject 请参阅此答案以获取更多信息： angular-cli其中webpack.config.js文件-新的2017年2月：ng弹出
解决方案2
3 2017-04-20 19:45:45
The angular-cli is made in a way that you should not be worrying about setting anything up in the webpack.config.js file as this is done already for you... Unfortunately, last time I checked there was no official list of all webpack loaders that are inclucded in the angular-cli , however, everything you think you'd need is already there. angular-cli的制作方式使您不必担心在webpack.config.js文件中进行任何设置，因为这已经为您完成了...不幸的是，我上次检查时没有official列表包含在angular-cli中的webpack loaders ，但是，您认为需要的一切都已经存在。 This is what makes angular-cli so simple and easy. 这就是使angular-cli如此简单和容易的原因。
With that being said, the reason why you're not seeing any javascript files linked in the index.html file is because when you're developing, you're not actually working with a build but rather with an app that is kept in "memory" and changes as you develop your app. 话虽如此，您之所以看不到index.html文件中链接的任何javascript文件，是因为在进行开发时，实际上并没有使用build ，而是使用了保存在“内存”，并在您开发应用时进行更改。 I know it's like magic and the first time I used angluar-cli I was confused about this too... 我知道这就像魔术，我第一次使用angluar-cli也对此感到困惑...
Lastly, if you actually build the project using the ng build --prod command, then you'll get a new directory called dist with the actual source code and a index.html file that links the bundle.js file as you would expect it. 最后，如果您实际使用ng build --prod命令build项目，那么您将获得一个名为dist的新目录，其中包含实际的源代码和一个index.html文件，该文件可以按预期的方式链接bundle.js文件。
As far as I know the webpack config is not supposed to be meant for changing in the angular cli . 据我所知， webpack config不应该用于更改angular cli 。 At least this was the case last time I checked. 至少我上次检查的情况就是这样。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.