Web包、开发人员中间件和静态文件

Question

我有一个与Express一起提供的Webpack/React/Redux项目，我很难理解它们是如何结合在一起的。我的Express应用程序运行Webpack并提供我的根索引。html文件，如下所示：

const app = express();
const server = require("http").createServer(app);

app.use(bodyParser.json());
app.use("/some/path", express.static(path.join(__dirname, "/public")));

// webpack middleware
const compiler = webpack(webpackConfig);

const webpackDevMid = require("webpack-dev-middleware");
const webpackHotMid = require("webpack-hot-middleware");

app.use(webpackDevMid(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath  // '/static/'
}));

app.use(webpackHotMid(compiler));

app.get("/", (req, res) => {
    if (!req.cookies.access_token) return res.redirect("/login");
    return res.sendFile(path.join(__dirname, "index.html"));
});

然后，我的根索引文件的主体中有“root”标记，脚本标记中有Webpack“/static/bundle.js”。根标记指向我的索引。js文件捆绑在捆绑包中。js和所有内容都正确渲染。这一切都很好。

我的问题是，我试图将我的favicon.ico包含在我的根index.html中，它没有与Webpack捆绑在一起，所以我想将其作为一个静态文件与Express一起使用，这通常是通过代码进行的：

app.use("/some/path", express.static(path.join(__dirname, "/public")));

不幸的是，此文件夹没有提供给客户端，我无法访问Webpack捆绑包之外的favicon（my index.html无权随意访问该捆绑包）。事实上，我试图以这种方式向客户机公开的任何东西都不起作用。关于webpack开发中间件，或者Express服务器使用webpack的方式，是否有我不了解的地方？有什么好处？

Answer 1

只需像这样设置静态文件夹

app.use(express.static(__dirname + '/path-to-static-folder'));

Answer 2

在您的网页包文件中，确保您有：

target: 'node',
node: {
    __dirname: false,
},

见：

• https://github.com/webpack/webpack/issues/1599

或者，使用path。加入（'.'）