After a two days fight with integrating angular with webpack I found a very strange behaviour.
In my html file I have been including the bundled JS source with
<script src="bundle.js"/>
This was not working at all. After I acidentally changed the line to
<script src="bundle.js"></script>
all of a sudden everything was fine.
With the <script/> style the html in the browser console was looking wired (tested with ie and 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>
Only the <h1> title is visible in the browser, everything else is not shown.
My index.html looks like this
<!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>
The index.js
import angular from 'angular';
var ngModule = angular.module('app', []);
And the 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"
}
]
}
};
Is there an explanation why <script/> style is not working?
