<script/> vs <script></script>与webpack和角

经过两天与整合角与webpack的斗争后，我发现了一个非常奇怪的行为。<script/> vs <script></script>与webpack和角

在我的HTML文件我已经包括

<script src="bundle.js"/>

这是不工作的捆绑的JS源。之后我自己将这一行改成了

<script src="bundle.js"></script>

突然间一切都很好。

随着<script/>风格的浏览器控制台的HTML一直在寻找有线（与IE和Chrome的测试）：

<body ng-app="app"> 
<h1>Angular + Webpack</h1> 

<script src="bundle.js"> 

<p>{{1+1===2}}</p> 

</body> <-- why is this inserted 
</html> <-- why is this inserted 
</script> <-- where is this comming from 
</body>

只有<h1>标题是在浏览器中可见，其他一切都没有显示。

我的index.html像这样

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Angular with Webpack</title> 
</head> 
<body ng-app="app"> 
<h1>Angular + Webpack</h1> 

<!-- strange behaviour with <script src="bundle.js"/> --> 
<script src="bundle.js"></script> 

<p>{{1+1===2}}</p> 

</body> 
</html>

的index.js

import angular from 'angular'; 
var ngModule = angular.module('app', []);

而且webpack.config.js

module.exports = { 
    debug: true, 
    devtool: 'source-map', 
    context: __dirname + '/app', 
    entry: './index.js', 
    output: { 
     path: __dirname + '/app', 
     filename: 'bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: "babel-loader" 
      } 
     ] 
    } 

};

有一个解释，为什么<script/>风格不管用？

来源

2016-04-14 BetaRide

自关闭脚本标记是无效的XHTML构造。这是HTML4之前的方式。但是，这个限制在HTML5的今天仍然存在。因此，浏览器添加关闭脚本标记和其他人使其成为有效的HTML –

自闭标签被允许但在HTML中被忽略。也就是说，您可以在标签的末尾加入/字符，但它没有任何意义。因此

<script .../>

是完全一样的

<script ...>

尽可能HTML而言。

来源

2016-04-14 13:09:55 Pointy

<script/> vs <script></script>与webpack和角

回答

相关问题