Question

经过两天与角度与webpack的整合，我发现了一种非常奇怪的行为。

在我的html文件中，我一直在使用捆绑的JS源代码

<script src="bundle.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/>样式不起作用？

Answer 1

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

<script .../>

与

完全相同

<script ...>

就HTML而言。

带有webpack和angular的<script> vs <script> </script>

1 个答案: