为什么 Webpack 在 Express.js 生成的项目中遇到错误？答案

【问题标题】：Why does Webpack encounter an error on an Express.js generated project?为什么 Webpack 在 Express.js 生成的项目中遇到错误？
【发布时间】：2016-10-18 19:39:19
【问题描述】：

我是 Node 社区的新手，正在尝试启动一个 node (v6.1.0) 项目。

设置

我使用 Express 生成器设置了一个项目。它创建了一个/bin/www，这似乎需要根目录中的app.js，然后启动一个服务器。
我尝试通过两种方式设置 Webpack (1.13.1)文档。

错误 1

我尝试使用哪个配置都没有关系（我一次只使用一个），当我启动我的 webpack 时会收到一条错误消息：

./bin/www 中的错误模块解析失败：~/testproject/bin/www 意外字符 '#' (1:0) 您可能需要适当的加载程序来处理此文件类型。

那行是#!/usr/bin/env node，我认为这不会导致错误。

错误 2

如果我注释掉那一行（我认为我不应该这样做）。它看起来像是构建了捆绑包，但是还有一大堆其他错误：

./~/serve-favicon/index.js 中的错误找不到模块：错误：无法在...中解析模块“fs” ./~/etag/index.js 中的错误未找到模块：错误：无法在 ...
中解析模块“fs” ./~/express/lib/request.js 中的错误未找到模块：错误：无法在 ...中解析模块“网络”

所有这些对我来说都有些陌生。

我正在寻找一种简单的方法来设置脚手架并运行 Webpack（最终是 Babel/React），但我什至无法通过设置/启动
我搜索了 Google、YouTube 和 Webpack/Express 文档；但似乎没有一个很好的例子（或解释）如何将 Webpack 与 Express 生成器一起使用。谁能解释一下？
似乎没有太多关于这两者的信息，除了将 Webpack 与 React 一起使用，然后在某些时候需要 Express（我不太确定为什么），但文件结构不同于使用快递发电机。谁能提供一个有用的网站？这些还不够：
- http://blog.mixtape.press/using-webpack-with-express-js-react-js/
- https://blog.risingstack.com/using-react-with-webpack-tutorial/

【问题讨论】：

Express 和 webpack 是分开的。 Webpack 只需生成您将包含在 index.html 上的脚本标记中的包，该包由许多可能的网络服务器之一提供服务，例如 express。
在组合之前单独学习技术，用express做一个简单的静态网页，添加react，然后将react项目与webpack打包github.com/petehunt/react-howto
好的，我知道它们是分开的，但是在我运行express testproject（根据expressjs.com/en/starter/generator.html）之后，我尝试设置webpack（根据webpack.github.io/docs/configuration.html），我遇到了错误以上所列。在全新的快速安装中，我的 webpack 入口点应该是什么？
@aarosil 我正在努力学习它！这是一个香草项目。这就是重点。我错过了一些简单的东西。我运行了这个页面，我编辑了一个很容易做到的页面... npm start，现在我尝试添加 webpack（如推荐的那样），我还能得到多少基本的东西？
您需要创建一个新入口点，然后创建一个 index.html，在该 index.html 上包含 bundle.js，并配置 express 以提供该 index.html（您可以使用 express static模块）。基本上现在你正在尝试使用服务器启动脚本作为 webpack 入口点，它永远无法工作。

标签： node.js express webpack express-generator

【解决方案1】：

根据与@aarosil 的对话，我了解到我所遵循的 webpack 教程对于 webpack 的新进入者来说写得不好。它建议使用 webpack 运行脚本设置 package.json:start 脚本，替换 /bin/www，使 /bin/www 看起来是入口点。这是不正确的。

这也让 webpack 看起来可以指向任何顶级 JS 文件，并嗅探和打包客户端 JavaScript，这让我认为它知道如何跳过服务器/路由器部分。这也是不正确的。

Webpack 仅用于客户端 JavaScript。如果使用 Express 脚手架，它处理路由并为不同的视图使用翡翠模板，如果这些翡翠模板不共享 JavaScript，它们就有不同的入口点。每个入口点都必须 webpacked（捆绑）并将捆绑包包含在翡翠模板中（或者它可以插入到 HTML 文档中），但最简单的方法是更新翡翠模板。

【讨论】：

@aarosil 如果你不想继续这个讨论，我不会怪你，但我现在很好奇为什么不能 webpack 节点服务器条目（/bin/www )，如果我以某种方式排除“/node_modules”目录，那不应该能够遍历后端 JavaScript 并创建一个我应该能够node backendbundle.js 的后端包吗？