WebPack编译Handlebars模板时devServer未输出预编译index.html问题求助

• HtmlWebpackPlugin 使用了错误的配置参数：自定义输出文件名的参数为filename，你写的outputFile是无效参数，插件会使用默认值输出，同时和你配置的路径规则冲突
• 入口配置错误：webpack 入口entry需指定JS文件，直接配置.hbs模板会导致模板被当作JS模块打包进main.js，无法正常生成独立HTML文件
• 路径不匹配：output.path配置的是当前配置文件上级目录的dist文件夹（../dist），但devServer的静态资源目录、你写的错误输出路径都指向当前配置文件同级的dist文件夹，导致生成的文件和你预期的存放位置不一致

首先新建一个JS入口文件，比如./src/index.js（内容可留空，后续可存放你的前端交互逻辑），再替换配置文件内容如下：

const path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env) => {
    
    return {
        // 修正为JS入口
        entry: "./src/index.js",
        output: {
            // 统一路径为当前配置文件同级的dist目录，你也可以按需调整，保证所有配置路径一致即可
            path: path.resolve(__dirname, './dist'),
            clean: true
        },
        devServer: {
            static: {
                directory: path.join(__dirname, 'dist'),
            },
            port: 5000,
            open: true,
            historyApiFallback: true,
            devMiddleware: {
                writeToDisk: true
            }
        },
        module: {
            rules: [
                {
                    test: /\.hbs$/,
                    loader: "handlebars-loader",
                    options: {
                        partialDirs: [
                            path.join(__dirname, 'handlebars', 'src', 'partials')
                        ]
                    }
                }
            ]
        },
        plugins: [
            new webpack.LoaderOptionsPlugin({
                options: {
                    handlebarsLoader: {}
                }
            }),
            new HtmlWebpackPlugin({
                title: 'My awesome service',
                template: './handlebars/src/pages/page-one.hbs',
                // 修正参数为filename，会自动输出到output.path配置的目录下
                filename: 'index.html'
            })
        ]
    };
};

重启devServer后，你配置的dist目录下就会同时生成main.js和index.html两个文件。

内容的提问来源于stack exchange，提问作者H-Man