Question

是否可以在运行时使用Webpack和Express动态呈现模板文件（例如Pug或Handlebars）？

我的问题是，加载我的根页面（index.pug）时，html会加载，但是没有资产正在加载。

示例：

app
.set('views', path.join(__dirname, 'views'))
.set('view engine', 'pug')
.use('/', function(req, res) {      
    res.render('index', {some: 'param'})
})

如果我删除了'/'路由处理程序，则页面加载的所有资产都很好。

客户端webpack.config.js文件：

module.exports = {
entry: {
    main: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=60000', './index.js', './css/main.css']
},
output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
},
mode: 'development',
target: 'web',
devtool: '#source-map',
module: {
    rules: [
        {
            test: /\.pug$/,
            use: ['html-loader?attrs=false', 'pug-html-loader']
        }
    ]
},
plugins: [
    new HtmlWebPackPlugin({
        template: './views/index.pug',
        filename: "./index.html",
        excludeChunks: [ 'app' ]
    })
]
}

服务器webpack.server.config.js：

module.exports = (env, argv) => {
return ({
    entry: {
        app: 'app.js',
    },
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].js'
    },
    target: 'node',
    node: {
        // Need this when working with express, otherwise the build fails
        __dirname: false,   // if you don't put this is, __dirname
        __filename: false,  // and __filename return blank or /
    },
    externals: [nodeExternals()], // Need this to avoid error when working with Express
    module: {
        rules: [
            {
                // Transpiles ES6-8 into ES5
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
})
}

Answer 1

您可以通过 2 个简单的步骤使其工作（基于上面的代码）。

在服务器中，将视图路径更改为您构建的模板所在的位置。在上面的示例中，它将位于 dist 文件夹中

    app
    .set("views", "./dist");
    .set('view engine', 'pug')
    .use('/', function(req, res) {      
        res.render('index', {some: 'param'})
    })

此时，在我们运行构建脚本并启动服务器后，我们会收到一条消息，在 dist 文件夹中没有视图，这是正确的，因为引擎正在寻找模板，而我们只有 html 文件

在 HtmlWebPackPlugin 中的 webpack.config.js 中，我们需要保留一个文件名作为模板

    plugins: [
        new HtmlWebPackPlugin({
            template: './views/index.pug',
            filename: "./index.pug",
            excludeChunks: [ 'app' ]
        })
    ]

就是这样。现在模板引擎会在 dist 中找到 index.pug 并注入样式和脚本并从中生成 html

注意：在生产中设置静态文件的路径很重要，否则即使正确注入了链接标签，您的css也不会显示

app.use(express.static(__dirname));

当我遇到同样的问题时，上述解决方案对我有用，但使用 ejs 模板。我在任何地方都找不到答案，所以希望它可以让一些人避免几个小时的挫败感。

在运行时使用Webpack和Express进行服务器端渲染

1 个答案: