為什么在運行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