时间戳

首页 > 解决方案 > 如何将 favicon 添加到 mern 应用程序？

node.js - 如何将 favicon 添加到 mern 应用程序？

问题描述

我从一本书中获取了这段代码，并希望对其进行自定义。我想添加一个图标，但不知道怎么做。谢谢你的提前。这不是完整的代码。根据我的问题，我只粘贴了特定的代码。对不起英语。我有一个模板文件

    export default ({ markup, css }) => {
  return `<!doctype html>
      <html lang="en">
  ...
         <link rel="icon" href="What path should be here? /favicon.ico">
... 
      </html>`;
};

我的服务器 webpack 文件

const path = require("path");
const nodeExternals = require("webpack-node-externals");
const CURRENT_WORKING_DIR = process.cwd();

const config = {
  name: "server",
  entry: [path.join(CURRENT_WORKING_DIR, "./server/server.js")],
  target: "node",
  output: {
    path: path.join(CURRENT_WORKING_DIR, "/dist/"),
    filename: "server.generated.js",
    publicPath: "/dist/",
    libraryTarget: "commonjs2",
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
        use: "file-loader",
      },
    ],
  },
};

module.exports = config;

对于客户

const path = require("path");
const webpack = require("webpack");
const CURRENT_WORKING_DIR = process.cwd();

const config = {
  name: "browser",
  mode: "development",
  devtool: "eval-source-map",
  entry: [
    "webpack-hot-middleware/client?reload=true",
    path.join(CURRENT_WORKING_DIR, "client/main.js"),
  ],
  output: {
    path: path.join(CURRENT_WORKING_DIR, "/dist"),
    filename: "bundle.js",
    publicPath: "/dist/",
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
        use: "file-loader",
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
  resolve: {
    alias: {
      "react-dom": "@hot-loader/react-dom",
    },
  },
};

module.exports = config;

express.js

import devBundle from "./devBundle";

const CURRENT_WORKING_DIR = process.cwd();
const app = express();


devBundle.compile(app);

app.use("/dist", express.static(path.join(CURRENT_WORKING_DIR, "dist")));

我对节点有一个基本的想法。但是我对 webpack 的了解是零。所以我粘贴了 webpack 配置文件中的所有代码，除了生产。如果您需要代码，请告诉我。

我要添加的另一件事是我的文件夹结构。 在此处输入图像描述

标签： node.js

解决方案

推荐阅读