1

我坚持使用 webpack 构建节点 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

包.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;
  };
4

1 回答 1

0

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

您需要另一个用于 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 服务器。希望我说得通。

于 2020-05-31T05:01:48.487 回答