爲什麼我必須在運行webpack-dev-server時將html文件放入bundle.js中

我從package.json腳本運行webpack-dev-server。爲什麼我必須在運行webpack-dev-server時將html文件放入bundle.js中

當我沒有在我的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-服務器時把第一束那裏，得到了由HTMLWebpackPlugin產生的第二束時，我建的項目進行生產。基本上我想擺脫我的生產代碼中的第一個包。

感謝您的任何建議。

來源

2017-07-25 Matus

我很困惑。你能分享一些html代碼來說明發生了什麼嗎？ –

所以我知道的是你不知道bundle的重要性。基本上，無論何時運行你的代碼，它都會在bundle.js中編譯所有的應用程序（包括所有的應用程序組件）。

一旦webpack編譯成功，你可以看看bundle.js。你會看到webpack只編譯和解析了該bundle中的所有東西。

因此，重要的是在你的webpack中添加你的代碼永遠不會運行。

來源

2017-07-25 12:24:07

是的，你是對的。但是當我試圖構建我的生產項目時，我不希望HTML中包含「bundle.js」文件，因爲HTMLWebpackPlugin將它放在那裏。 – Matus

基本上發生的是我有兩個索引中的包。 <腳本類型= 「文/ JavaScript的」 SRC = 「app.bundle.aa2801db8d757c2f2d78.js」> 我想擺脫的第一個 – Matus

您需要從您的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。你可以在這裏看到完整的配置文件和更多的解釋性文字。

來源

2017-07-25 12:38:14

好吧，我的壞人。 HTMLWebpackPlugin配置不正確。

感謝您的幫助。

來源

2017-07-25 12:41:56 Matus

爲什麼我必須在運行webpack-dev-server時將html文件放入bundle.js中

回答

相關問題