Webpack、Dev-Middleware和静态文件

Question

我有一个用Express服务的Webpack/React/Redux项目，但是我对它们如何结合在一起感到困惑。我的Express应用程序运行Webpack并提供我的根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"));
});

我的根目录索引文件在body部分有“root”标签和Webpack“/static/bundle.js”的script标签。root标签指向我打包在bundle.js中的index.js文件，所有内容都能正确渲染。这一切都很好。

但问题是，我想在我的根目录index.html中包含favicon.ico，它没有被Webpack打包，所以我想用Express作为静态文件来提供它，通常我使用以下代码：

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

很遗憾，这个文件夹无法提供给客户端访问，我也无法在Webpack捆绑包之外访问我的Favicon图标（而我的index.html没有任何自主访问权）。实际上，我尝试以这种方式向客户端公开的任何内容都不起作用。我是否对webpack-dev-middleware或Express服务器与Webpack的工作方式有所误解？是什么原因呢？

- D Vorona

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( '.' )

- Izhaki

---

我认为 OP 的预期目标不是 node（他们没有捆绑服务器端代码）。 - robertklep

@robertklep，你可能是对的，但由于脚本明显使用了express，它是一个服务器端脚本。如果webpack构建任何内容，它将注入自己的__dirname。我猜我们得看看OP的回应。 - Izhaki

webpack-dev-middleware 用于构建自己的 webpack-dev-server，其目的是动态打包和提供 客户端 代码。 - robertklep

@robertklep，没问题。但是 OP 可能仍然会使用 webpack 打包服务器端代码，这种情况下 __dirname 可能会出现故障。我已经回复了这个问题，因为我遇到过类似的问题，并且我正在使用 webpack 来打包我的服务器代码。如果 OP 不使用 webpack 打包服务器，则此答案将无法帮助。这可能是一个冒险，但也有可能是这种情况。 - Izhaki

Answer 2

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

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

- Mirza Andriamanamisoa