构建后构建和提供文件

Question

这是我的第一个自托管网站和服务器，所以请对我宽容一点！XD

我一直在使用 webpack 和 vanillajs 进行本地开发。我的服务器托管在 digitalocean 上，使用 ubuntu。我在本地构建，推送到 github repo，然后将该 repo 拉入我的服务器。我计划从下周开始使用 github 操作，但目前这是我从前端大师那里学到的（可能不太理想？）设置

我的服务器文件夹结构：

www
|--site-folder
    |--src
        |-- css
        |-- js
        |-- index.html
        // etc
    |--dev
        |-- index.html
        |-- index.bundle.js
        |-- page2.html
        |-- page2.bundle.js
        |-- image.png
        //... assets/more js/html files etc...

我只是想知道我应该把用于提供 html 的 express 应用程序放在哪里，以及如何更好地构造 webpack 的输出？

如您所见，它只是将所有内容输出到一个文件夹中，但我希望它具有更好的结构。我是否应该有一个脚本来在每次之后移动文件git pull？或者我应该在 webpack 配置中指定更好的路径？

这是我目前的 webpack 配置，我想我可以添加path.resolve(__dirname, 'dist/js')，为每个相关模块规则查找一个输出路径选项，然后执行相同的操作HtmlWebpackPlugin或在文件名前添加路径？

那么我可以在路线目录中放置一个简单的快速应用程序吗？

抱歉，我有点困惑！非常感谢您的帮助

module.exports = {
    entry: {//snip},
    output: {
        filename: '[name].bundle.[chunkhash].js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    module: {
        rules: [
            {
                test:/\.css$/i,
                use:  ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.js$/i,
                use: ['babel-loader'],
                exclude: /node_modules/,
             },
            {
                test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
                type: 'asset/resource'
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.html',
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            filename: 'admin.html',
            template: './src/admin.html',
            chunks: ['admin']
        })
    ]
}