为什么在运行webpack-dev-server时必须将bundle.js脚本放入html中

Question

我正在从我的package.json脚本运行webpack-dev-server。

当我不在我的index.html中放置标记时，即使webpack-dev-server应该自动将其放置在其中，也不会加载捆绑软件。

我的代码如下所示：

<body>
  <div id="my-app"></div>
  <script src="bundle.js"></script>
  <script type="text/javascript" src="app.bundle.aa2801db8d757c2f2d78.js"></script>
</body>

在运行webpack-dev-server时，我将第一个捆绑软件放在那里，而在构建生产项目时，第二个捆绑软件是由HTMLWebpackPlugin生成的。 基本上，我想摆脱生产代码中的第一个捆绑软件。

感谢您的任何建议。

Answer 1

您需要从HTML中引用JavaScript包，因为它不会自动插入其中。

但是，您可以使用HtmlWebpackPlugin来自动添加捆绑软件参考。 它将添加到webpack.config.js文件的插件部分，如下所示：

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: "./source/index.js",
    module: {
        // keep the rules you've already got
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        }),
        // ... keep all your other plugins here...
    ]
}

确保模板的值指向您的HTML文件...

来源：该代码取自我在github上的webpack项目模板。 您可以在此处看到完整的配置文件和更多说明性文本。

Answer 2

所以我了解的是您不知道bundle的重要性。基本上，每当您运行代码时，它都会编译bundle.js中的所有内容（包括应用程序的所有组件）。

您可以在webpack成功编译后查看bundle.js。您将看到webpack仅编译和解析该bundle中的所有内容。

因此，重要的是要在Webpack中添加代码，否则您的代码将永远无法运行。

Answer 3

好吧，我的坏家伙。 HTMLWebpackPlugin配置不正确。

谢谢你的帮助。

为什么在运行webpack-dev-server时必须将bundle.js脚本放入html中

问题描述

3 个解决方案

解决方案1
1 2017-07-25 12:38:14

解决方案2
0 2017-07-25 12:24:07

解决方案3
0 2017-07-25 12:41:56

为什么在运行webpack-dev-server时必须将bundle.js脚本放入html中

问题描述

3 个解决方案

解决方案1 1 2017-07-25 12:38:14

解决方案2 0 2017-07-25 12:24:07

解决方案3 0 2017-07-25 12:41:56

解决方案1
1 2017-07-25 12:38:14

解决方案2
0 2017-07-25 12:24:07

解决方案3
0 2017-07-25 12:41:56