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

Question

我有一个节点应用程序，它使用 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') 时可以使用，但我更希望有一个用于生产的编译文件。

Answer 1

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

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

Webpack 的静态分析仅智能到可以理解布尔值，所以像 if (BUILD_TARGET === 'browser') 这样的操作是行不通的；解析器不会遵循逻辑并将处理这两个要求。

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

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

Webpack ignore code splitting when target node

javascript

node.js

reactjs

webpack

react-router