Webpack 在目标节点时忽略代码拆分

Posted 2023-02-21

【中文标题】Webpack 在目标节点时忽略代码拆分

【英文标题】：Webpack ignore code splitting when target node

【发布时间】：2016-05-24 04:29:33

【问题描述】：

我有一个节点应用程序，它使用 react-router 在服务器端呈现 React 视图。我的问题是我使用require.ensure 在客户端进行代码拆分，但在编译服务器端代码时不想进行代码拆分。这是我的 webpack 配置：

  entry: path.join(__dirname, '../server/app.js'),
  target: 'node',
  output: 
    path: './',
    filename: 'server.js'
  ,
  module: 
    loaders: [
       test: /\.js$/, loader: 'babel', exclude: /node_modules/ ,
       test: /\.hbs$/, loader: 'handlebars-loader', include: /client/ 
    ]
  ,
  externals: nodeModules

当我运行它时，我会得到 server.js、1.server.js、2.server.js 等。我宁愿只有一个 server.js 文件。

在我拥有的每个路由文件的顶部：

if (typeof require.ensure !== 'function') require.ensure = (d, c) => c(require);

当我在开发中使用require('babel/register') 时，这很有效，但我宁愿有一个用于生产的编译文件。

【参考方案1】：

我已经用围绕 require 的条件来解决这个问题。如果是浏览器构建，require.ensure，如果是服务器构建，只需要。我使用DefinePlugin 为每个构建的环境定义“常量”变量，所以它看起来像

if (BUILD_BROWSER) 
  require.ensure('foo.js', function()  ... );
 else 
  require('foo.js');
  ...

Webpack 的静态分析只够聪明地理解布尔值，所以像if (BUILD_TARGET === 'browser') 这样的操作是行不通的；解析器不会遵循逻辑，会同时处理这两个需求。

如果您使用的是 Uglify 插件，它将去除不需要的条件逻辑，这样您就不会膨胀您的生产构建。

【讨论】：

谢谢！像魅力一样工作。

但是你遇到了 React 的问题，即服务器端渲染的 html 和客户端生成的 HTML 之间的校验和不匹配，从而失去了服务器的许多“好处”侧面渲染。 IE。服务器和客户端各自呈现不同的 HTML。此外，我什至不确定客户端如何有条件地从嵌入在 DOM 中的不同 js 包（您只为给定路由呈现）中加载，而现在不触发您的主包以包含相同的文件。它似乎只能通过为每条路线创建入口点来工作，而不是ensure。