Question

首先，我是Webpack / NodeJS的新手，所以这可能是一个愚蠢的问题。此外，英语不是我的母语，所以如果出现错误，请原谅。

我目前正在使用带有Pug模板的NodeJS和Express开发Web应用程序。我想将Webpack用作前端和后端的唯一构建系统。

我不太了解如何使用Webpack

构建服务器
构建模板
构建前端JavaScript
将前端JavaScript包含在模板中

我正在努力使所有这些协同工作。

我阅读了很多文章和文档，包括this，this，this等，但是我仍然不知道该怎么做。

这是我目前的代码：

// app.js
const express = require('express');
const pug = require('pug');
const app = express();
const port = 3000;

app.set('view engine', pug.name.toLowerCase());
app.set('views', 'views');
app.use(express.static('public'));

app.get('/', (req, res) => {
    res.render('index', {title: "Index", message: "Index page"});
});
app.get('/s', (req, res) => {
    res.render('index', {title: req.url, message: "Another page"});
});
app.use((req, res, next) => {
    res.status(404);
    res.render('index', {title: "404", message: "This page do not exists"});
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

//- views/index.pug
doctype html
html
    head
        meta(charset="UTF-8")
        title MyApp
    body
        h1= title
        p= message
        script(src='/alert.js')

// public/alert.js
alert("Hey");

现在，我的Webpack配置文件如下：

const path = require('path');
const nodeExternals = require('webpack-node-externals')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    target: 'node',
    mode: 'development',
    externals: [nodeExternals()],
    entry: {
        server: './app.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: './views/index.pug',
          hash: true,
        })
    ],
}

但是它不起作用。我有以下错误：

Error: Failed to lookup view "index" in views directory "views"

我不明白为什么。 Webpack的目标不是最后只包含一个文件并且不需要整个开发树状结构吗？

有人知道为什么它不起作用以及如何实现我想要的吗？

将NodeJS / Express后端与Webpack捆绑在一起

0 个答案: