时间戳

首页 > 解决方案 > 使用 webpack 从 dist 文件夹构建后如何加载车把模板？

javascript - 使用 webpack 从 dist 文件夹构建后如何加载车把模板？

问题描述

我正在使用 express 和车把构建单页节点应用程序，但我是 node 新手，在使用 webpack 构建车把时卡住了。我的文件夹结构是这样的：https ://imgur.com/JXbIe1S

我正在使用“express-handlebars”（https://github.com/ericf/express-handlebars），我需要在服务器上渲染一些模板来处理构建标准布局（带有页眉、页脚和内容面板）。

视图/布局/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>

意见/home.hbs：

Home
<a href="employees">employees</a>

使用 'handlebars-loader' ( https://github.com/pcardune/handlebars-loader ) 部分在 dist 文件夹中正确加载，但 'home.hbs' 没有加载到 'main.hbs' 中，这应该正如我在快速路线中提到的那样，默认加载。

服务器/express.js：

const express = require('express');
const db = require('./database');
const server = express()
const path = require('path')
const router = require('./router');

//WEBPACK CONFIGURATION
const webpack = require('webpack')
const config = require('../../config/webpack.config')
const compiler = webpack(config)
const webpackHotMiddleware = require('webpack-hot-middleware')(
    compiler
)
const webpackDevMiddleware = require('webpack-dev-middleware')(
    compiler,
    config.devServer
)
server.use('/', router) //express route
server.use(webpackDevMiddleware)
server.use(webpackHotMiddleware)


//VIEW ENGINE SETUP
const hbs = require( 'express-handlebars');
server.set('views', path.resolve(__dirname, '../views/'));
server.engine( 'hbs', hbs({
  extname: '.hbs',
  defaultView: 'main',
  layoutsDir: path.resolve(__dirname, '../views/layouts/'),
  partialsDir: path.resolve(__dirname, '../views/partials/')
}));
server.set('view engine', 'hbs');

db.connect(() => {
    server.listen(3000, () => { 
        console.log('Server is listenig with mongoose.')
    })
})

服务器/路由器.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;

配置/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 run build”之后，“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>

我不知道我错过了什么，因为我是新手，这是由 webpack 引起的还是我没有得到路由问题，非常感谢任何帮助。

标签： javascriptnode.jsexpresshandlebars.jsexpress-handlebars

解决方案

推荐阅读