Question

我有一个用Express服务的Webpack / React / Redux项目，我在理解它们如何组合时遇到了一些麻烦。我的Express应用程序运行Webpack并提供我的root index.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”。 root标记指向捆绑在bundle.js中的index.js文件，所有内容都正确呈现。一切正常。

我的问题是我正在尝试将我的favicon.ico包含在我的root index.html中，它没有与Webpack捆绑在一起，所以我想将它作为一个静态文件提供给Express，我通常会这样做代码：

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

不幸的是，这个文件夹没有被提供给客户端，我无法在Webpack包之外访问我的favicon（我的index.html没有自行决定访问权限）。事实上，我尝试以这种方式向客户端公开的任何东西都在起作用。有什么我不了解webpack-dev-middleware，或Express服务器与Webpack一起工作的方式？是什么给了什么？

Answer 1

在您的网络包文件中，请确保您拥有：

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

请参阅：

或者，使用path.join( '.' )

Answer 2

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

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

Webpack，Dev-Middleware和静态文件

2 个答案: