如何使用PUG Engine构建（Webpack）Node Js项目？

Question

我被困于使用webpack构建node js项目，并且前端使用pug引擎。

我的项目结构：

bin 
controller
  - csv.controller.js
public
  - stylesheets
  - javascript
  - images
routes
  - csv.route.js
  - index.route.js
views
  - layouts
   -- layout.pug
  -index.pug
app.js

Package.json文件

{
  "name": "csv",
  "version": "0.0.0",
  "private": true,
  "scripts": {
          "build": "webpack --mode=production",
          "build:dev": "webpack --mode=development",
          "start":"nodemon ./app.js",
          "start:dev": "webpack-dev-server --mode=development"
             },
  "dependencies": {
          "body-parser": "^1.19.0",
          "compression": "^1.7.4",
          "cookie-parser": "~1.4.4",
          "csv-parser": "^2.3.1",
          "csv-writer": "^1.5.0",
          "debug": "~2.6.9",
          "express": "^4.17.1",
          "express-fileupload": "^1.1.6-alpha.5",
          "fast-csv": "^3.4.0",
          "http-errors": "~1.6.3",
          "morgan": "^1.9.1",
          "multer": "^1.4.2",
          "npm-check-updates": "^3.1.23",
          "request": "^2.88.0"
         },
        "devDependencies": {
              "@babel/core": "^7.6.2",
              "@babel/preset-env": "^7.6.2",
              "babel-loader": "^8.0.6",
              "clean-webpack-plugin": "^3.0.0",
              "css-loader": "^3.2.0",
              "extract-text-webpack-plugin": "^3.0.2",
              "file-loader": "^4.2.0",
              "html-webpack-plugin": "^3.2.0",
              "mini-css-extract-plugin": "^0.8.0",
              "pug": "^2.0.4",
              "pug-loader": "^2.4.0",
              "style-loader": "^1.0.0",
              "webpack": "^4.40.2",
              "webpack-cli": "^3.3.9",
              "webpack-dev-server": "^3.8.1",
              "webpack-merge": "^4.2.2"
    }
  }

实际上，构建后，我想要的是一个dist文件夹，其中包含一个build.js或其名称以及所有公用文件夹资产在同一目录中。我尝试使用以下一些代码来构建项目。

Webpack.config.js

 const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const ExtractTextPlugin = require("extract-text-webpack-plugin");
    const config = {
      entry: {
      app: "./app.js"
             },
      target: "node",
      output: {
      path: path.resolve(__dirname, "dist"),
      filename: "[name].bundle.js"
             },
      devServer: {
      port: 3000
            },
      plugins: [
      new HtmlWebpackPlugin({
         template: "./views/index.pug"
          })
        ],
     module: {
       rules: [
               {
                test: /\.pug$/,
                use: ["pug-loader"]
               },
               {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
               },
               {
                test: /\.(png|svg|jpg|gif)$/,
                use: ["file-loader"]
                },
               {
                test: [/.js$/],
                exclude: /(node_modules)/,
                  use: {
                      loader: "babel-loader",
                      options: {
                      presets: ["@babel/preset-env"]
                      }
                  }
               },
               {
                   test: /\.css$/,
                   use: ExtractTextPlugin.extract({
                   fallback: "style-loader",
                   use: "css-loader"
                  })
                }
              ]
          }
      }; 
 module.exports = (env, argv) => {
     if (argv.mode === "development") {
      }
     if (argv.mode === "production") {
      }
     return config;
  };

Answer 1

我知道这个问题很旧，但是以防万一有人在寻找答案。

您需要app.js的另一个Webpack配置，这是明确的入口点。称其为webpack.server.js或webpack.server.config.js或任何方便的名称。确保包括webpack-node-externals：https://www.npmjs.com/package/webpack-node-externals

它可能看起来像这样：

//webpack.server.js

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

module.exports = {

  return ({
    entry: {
      app: ./src/server/app.js,
    },
    output: {
      path: path.join(__dirname, 'dist'),
      publicPath: '/',
      filename: '[name].js',
    },
    target: 'node',
    node: {
      __dirname: false,
      __filename: false,
    },
    externals: [nodeExternals()],
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
      ],
    },
  });
};

还请在您的app.js中使用webpack-dev-middleware。参见下面的链接：

https://webpack.js.org/guides/development/

在package.json中，包括一个看起来像这样的脚本：

"server:dev": "webpack --config webpack.config.js && webpack --mode development --config webpack.server.js && node ./dist/app.js",

在webpack.config.js中，将入口点设为导入前端资产的js文件。那就是你的样式表和其他js代码。不知道您使用的是哪个CSS框架。但是，我使用的是tailwindcss，并且我有一个js入口文件，该文件会导入tailwindcss和我的其他js代码。因此，从本质上讲，您可能需要两个webpack配置文件，一个用于前端，一个用于Express服务器。希望我有道理。