1

是否可以在运行时使用 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"
                }
            }
        ]
    }
})
}
4

1 回答 1

2

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

  1. 在服务器中，将视图路径更改为构建模板的位置。在上面的示例中，它将位于 dist 文件夹中
    app
    .set("views", "./dist");
    .set('view engine', 'pug')
    .use('/', function(req, res) {      
        res.render('index', {some: 'param'})
    })

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

  1. 在 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 模板时，上述解决方案对我有用。我在任何地方都找不到它的答案，所以希望它可以节省几个小时的挫败感。

于 2021-08-10T10:26:14.477 回答