WebPack，Dev-Middleware和静态文件

Question

我有一个webpack/react/redux项目，我很难理解它们如何结合在一起。我的Express App运行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和webpack"/static/bundle.js"。root标签指向我的index.js文件捆绑在bundle.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 Server与WebPack的方式不了解？什么给？

Answer 1

在您的WebPack文件中确保您有：

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

请参阅：

• https://github.com/webpack/webpack/issues/1599
• https://github.com/webpack/docs/wiki/configuration#node

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

Answer 2

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

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