Question

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

当我没有在我的index.html中添加标记时，即使webpack-dev-server应该自动将它放在那里，也不会加载bundle。

我的代码如下所示：

<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时将第一个bundle放在那里，当我为生产构建项目时，第二个bundle由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文件...

来源：此代码取自my webpack project template on github。您可以在那里看到完整的配置文件和更多解释性文字。

Answer 2

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

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

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

Answer 3

好的，我的坏人。 HTMLWebpackPlugin未正确配置。

感谢您的帮助。

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

3 个答案: