<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和角

回答

相關問題