使用 Webpack 将 node_modules 和客户端 js 与 express 捆绑在一起答案

【问题标题】：Using Webpack to bundle node_modules and client side js with express使用 Webpack 将 node_modules 和客户端 js 与 express 捆绑在一起
【发布时间】：2018-02-09 23:18:17
【问题描述】：

我对 webpack 比较陌生，对如何设置它有点困惑，我使用 express 作为 web 服务器，我的大部分代码都是服务器端代码。

首先我通过阅读文档尝试了这样的事情：

module.exports = {
  context: __dirname + "/assets",
  target: 'node',
  entry: "../app.js",
  output: {
    filename: "bundle.js"
  }
};

这给了我一个不想要的结果，即生成一个包含所有依赖项的 bundle.js 以及整个项目的所有服务器端代码。

假设我有 4 页。

page1（使用 jquery.js、script1.js）
page2（使用 jquery.js）
page3（使用 jquery.js、script1.js）
page4（不使用js）

我想创建一个 webpack 来编译所有这些以通过网页提供给客户端。我已经通过npm install jquery 安装了 jquery，这意味着它在我的node_modules 目录中。 script1.js 是为项目制作的脚本文件，存储在/assets/js 目录中。

你会怎么做这样的事情？

【问题讨论】：

浏览器缓存 javascript 资源（取决于缓存标头），因此，从 page1 导航到 page2 的用户不一定会加载“jquery.js”两次.. 因为 jquery 已经加载并缓存了.. A野外的一般模式是将所有第 3 方库合并到 1 个“vendor.js”文件中，并将其他所有内容合并到“app.js”中
这似乎相当浪费，因为如果我使用 3 个库并将它们编译为 vendor.js 然后转到第 4 页，第 4 页将加载所有 3 个库但它不使用其中任何一个。捆绑 app.js 最终也会捆绑我所有的服务器端代码而不是客户端代码，我没有客户端代码的单一入口点。
我认为您误解了@Varinder，因为脚本在初始加载时被加载一次并且不会再次提供服务，除非您通过手动输入每次加载的地址进行导航，就是这种情况为你。 Webpack 更像是一个前端（客户端）构建器。您可以将其用作开发服务器并代理 express 应用程序，但您根本不应该从服务器代码构建。如果你想用它自己的包加载每个页面，那么你可能需要对 webpack 进行多个配置，但你需要首先定义客户端代码的位置。
这是我要问的，因为我找不到任何将节点模块构建为依赖项的示例，我可以给出我认为是入口点的绝对路径对于那个模块，但这似乎相当混乱。

标签： node.js express webpack

【解决方案1】：

所以在搞砸了几个小时之后，您可以通过名称引用节点模块，以下将 jquery 节点模块捆绑到根项目目录中的文件 jquery.js 中。

  module.exports = {
    target: 'node',
    entry: {
     jquery: "jquery"
    },
    output: {
      filename: '[name].js',
    }
  };

【讨论】：