0
Nach einem zweitägigen Kampf mit der Integration von eckigen mit Webpack fand ich ein sehr seltsames Verhalten.<script/> vs <script></script> mit webpack und eckig
In meiner HTML-Datei Ich habe die gebündelt einschließlich JS Quelle mit
<script src="bundle.js"/>
Das ist nicht bei allen. Nachdem ich die Zeile versehentlich auf
geändert hatte, war plötzlich alles in Ordnung.
Mit dem <script/> Stil der HTML-Code in der Browser-Konsole war auf der Suche verdrahtet (getestet mit IE und Chrom):
<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>
Nur der <h1> Titel ist sichtbar im Browser, ist alles andere nicht gezeigt.
Meine index.html sieht aus wie dieses
<!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>
Die index.js
import angular from 'angular';
var ngModule = angular.module('app', []);
Und die 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"
}
]
}
};
Gibt es eine Erklärung, warum <script/> Stil funktioniert nicht?
Selbstschließende Skript-Tags waren ungültige XHTML-Konstrukte. Das war weit vor HTML4. Diese Einschränkung existiert jedoch noch heute in HTML5-Tagen. So fügt der Browser schließendes Skript-Tag und andere hinzu, um es gültiges HTML zu machen –