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

【问题标题】：Why do I have to put bundle.js script in html when running webpack-dev-server为什么我在运行 webpack-dev-server 时必须将 bundle.js 脚本放在 html 中
【发布时间】：2017-07-25 12:18:47
【问题描述】：

我正在从我的 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 时将第一个包放在那里，而当我为生产构建项目时，第二个包由 HTMLWebpackPlugin 生成。基本上我想摆脱我的生产代码中的第一个包。

感谢您的任何建议。

【问题讨论】：

我很困惑。你能分享一些html代码来说明发生了什么吗？

标签： reactjs webpack webpack-dev-server

【解决方案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。你可以在那里看到完整的配置文件和更多的解释性文本。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

是的，你是对的。但是当我尝试构建我的生产项目时，我不希望在 html 中包含“bundle.js”文件，因为 HTMLWebpackPlugin 将它放在那里。
基本上发生的事情是我在索引中有两个捆绑包。我要去掉第一个跨度>