webpack 入口html頁面和自定義打包生成的html關系

這是我的文件目錄結構

這是配置文件里面有自定義生成html文件

var path = require("path");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack'); // 引入 webpack 便于調用其內置插件

// console.log(CleanWebpackPlugin);

module.exports = {
  devtool: 'inline-source-map',
    devServer: {
        contentBase: path.resolve(__dirname, 'dist/js'),
        compress:true,
        port:9000,
        host:'127.0.0.1',
        hot: true, // 告訴 dev-server 我們在用 HMR
        hotOnly: true, // 指定如果熱加載失敗了禁止刷新頁面 (這是 webpack 的默認行為)，這樣便于我們知道失敗是因為何種錯誤
        inline:true,

    },
    entry: {
        print:'./src/js/print.js',
        index:'./src/js/index.js'
    },
    module:{
          rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },
        ]
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
            title: 'Output Management',
            inject:'head',
            filename:'index.html',
            template:'index.html'
      }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: '[name].bundle.js',
        hotUpdateChunkFilename: 'hot/hot-update.js',  //指定熱替換補丁js文件和json描述文件生成路徑 ，每次文件變化都會生成一次
        hotUpdateMainFilename: 'hot/hot-update.json'

        // chunkFilename:'[name].bundle.js',
    },
};

當我根目錄下的html文件為空時打包生成的dist/index.html 是這樣的

<head><script type="text/javascript" src="print.bundle.js"></script><script type="text/javascript" src="index.bundle.js"></script></head>

當我改變根目錄下的HTML 為


 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test</title>
    </head>
    <body>
        <script src="./src/js/index.js"></script>
    </body>
    </html>

生成的html這樣的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
<script type="text/javascript" src="print.bundle.js"></script><script type="text/javascript" src="index.bundle.js"></script></head>
<body>
    <script src="./src/js/index.js"></script>
</body>
</html>

兩者有什么關聯(lián)？

回答

編輯回答