Рендеринг на стороне сервера с Webpack и Express во время выполнения

Question

Можно ли динамически отображать файлы шаблонов (например, Pug или Handlebars) во время выполнения, используя Webpack и Express?

Моя проблема при загрузке моей корневой страницы (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

Вы можете заставить его работать в два простых шага (на основе кода выше).

1. На сервере измените путь просмотра туда, где будет ваш созданный шаблон. В приведенном выше примере он будет внутри папки dist.

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

На этом этапе, после того, как мы запустим сценарий сборки и запустим сервер, мы получим сообщение о том, что в папке dist нет представления, что правильно, потому что движок ищет шаблон, а все, что у нас есть, это файлы html.

2. В webpack.config.js в HtmlWebPackPlugin нам нужно оставить имя файла в качестве шаблона

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

И это все. Теперь шаблонизатор найдет index.pug в dist с внедренным стилем и скриптом и сгенерирует из него html.

Примечание: в производстве важно установить путь для статических файлов, иначе вы не сможете отобразить свой css, даже если теги ссылок были введены правильно.

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

Приведенное выше решение сработало для меня, когда я столкнулся с той же проблемой, но с шаблоном ejs. Я нигде не мог найти на него ответа, так что, надеюсь, это избавит кого-то от многих часов разочарования.