Fatal编程技术网
  • javascript/
  • Javascript 如何加载把手模板后，从dist文件夹的网页包建设？

Javascript 如何加载把手模板后，从dist文件夹的网页包建设？

javascript node.js express

Javascript 如何加载把手模板后，从dist文件夹的网页包建设？,javascript,node.js,express,handlebars.js,express-handlebars,Javascript,Node.js,Express,Handlebars.js,Express Handlebars,我正在用express和Handlebar构建一个单页节点应用程序，但我对node是新手，在用webpack构建把手时遇到了问题。 我的文件夹结构如下所示： 我正在使用“express Handlebar”（），我需要在服务器上呈现一些模板来处理建筑标准布局（带有页眉、页脚和内容面板） 视图/布局/main.hbs： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

我正在用express和Handlebar构建一个单页节点应用程序，但我对node是新手，在用webpack构建把手时遇到了问题。 我的文件夹结构如下所示：

我正在使用“express Handlebar”（），我需要在服务器上呈现一些模板来处理建筑标准布局（带有页眉、页脚和内容面板）

视图/布局/main.hbs：

<!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>Node with Webpack</title>
</head>
<body>

    <main> 
        <header>
            {{> header}}
        </header>
       {{{body}}}
       <footer>
           {{> footer}}
       </footer> 
    </main>

</body>     
</html>
server/router.js：

const express = require('express');
const router = express.Router();
const employeeController = require('../controllers/employeeController');

router.get('/', (req, res) => { 
    console.log('home')
    res.render('home', {
        layout: 'main'
    });
})

router.get('/employees', employeeController.index);

module.exports = router;
config/webpack.config.js：

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')


module.exports = {
    mode: 'development',
    entry: {
        main: ['@babel/polyfill', './src/index.js']
    }, 
    output: {
        filename: '[name]-bundle-[hash].js',
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/' //Absolute path
    },
    devServer: {
        contentBase: 'dist',
        hot: true,
        overlay: true,
        stats: {
            colors: true
            } 
    },
    resolve: {
        extensions: ['*', '.js'],
        modules: [
            path.resolve(__dirname, '..', 'node_modules'),
        ],
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader'
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            },
            {
                test: /\.scss|\.sass$/,
                loader: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    name: 'images/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                limit: 1000,
                    name: 'fonts/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(webm|mp4)$/,
                loader: 'file-loader',
                options: {
                    name: 'videos/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            attrs: ['img:src']
                        }
                    }
                ]
            },
            {
                test: /\.hbs$/,
                use: [
                    {
                        loader: 'handlebars-loader',
                        query: {
                            partialDirs: [
                                path.join(__dirname, '../src/views', 'partials')
                            ],
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HTMLWebpackPlugin({
            template: './src/views/layouts/main.hbs',
            title:'Handlebars vew engine'
        })
    ]
}
我想有一个单一的html文件，其中根据路径的网页将加载。现在在“npm运行构建”之后，“index.html”文件如下所示：

dist/index.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>Node with Webpack</title>
</head>
<body>

    <main> 
        <header><h3>header</h3></header>

       <footer><h3>footer</h3></footer> 
    </main>

<script type="text/javascript" src="/main-bundle-55e1587718f042cecfec.js"></script></body>     
</html>


带有网页包的节点
标题
页脚
我不知道我错过了什么，因为我是新来的，这是从网页上造成的还是我没有得到的路由问题，任何帮助都将不胜感激。

您找到解决方案了吗？我也在努力解决同样的问题。很高兴与大家分享你的经验。 
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')


module.exports = {
    mode: 'development',
    entry: {
        main: ['@babel/polyfill', './src/index.js']
    }, 
    output: {
        filename: '[name]-bundle-[hash].js',
        path: path.resolve(__dirname, '../dist'),
        publicPath: '/' //Absolute path
    },
    devServer: {
        contentBase: 'dist',
        hot: true,
        overlay: true,
        stats: {
            colors: true
            } 
    },
    resolve: {
        extensions: ['*', '.js'],
        modules: [
            path.resolve(__dirname, '..', 'node_modules'),
        ],
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader'
                    }
                ],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            },
            {
                test: /\.scss|\.sass$/,
                loader: ['style-loader', 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                query: {
                    limit: 10000,
                    name: 'images/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                limit: 1000,
                    name: 'fonts/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(webm|mp4)$/,
                loader: 'file-loader',
                options: {
                    name: 'videos/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {
                            attrs: ['img:src']
                        }
                    }
                ]
            },
            {
                test: /\.hbs$/,
                use: [
                    {
                        loader: 'handlebars-loader',
                        query: {
                            partialDirs: [
                                path.join(__dirname, '../src/views', 'partials')
                            ],
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HTMLWebpackPlugin({
            template: './src/views/layouts/main.hbs',
            title:'Handlebars vew engine'
        })
    ]
}

<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>Node with Webpack</title>
</head>
<body>

    <main> 
        <header><h3>header</h3></header>

       <footer><h3>footer</h3></footer> 
    </main>

<script type="text/javascript" src="/main-bundle-55e1587718f042cecfec.js"></script></body>     
</html>