webpack 入口html页面和自定义打包生成的html关系

Question

webpack 入口html页面和自定义打包生成的html关系

发布于
2018-03-20

这是我的文件目录结构

这是配置文件里面有自定义生成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>

两者有什么关联？

javascript

html5 css

阅读 5.7k

1 个回答

SevenOutman

✓ 已被采纳

HTML 文件不是由入口引入的，而是由 HtmlWebpackPlugin 生成的。建议你研究下你 webpack 配置里 plugins 部分的 HtmlWebpackPlugin，并参考它的官方文档。

希望对你有帮助