Webpack 在目标节点时忽略代码拆分 [英] Webpack ignore code splitting when target node

问题描述

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

I've got a node app that uses react-router to render React views server-side. My issue is that I'm using require.ensure to do code splitting on the client-side but don't want to have code splitting when I compile my server-side code. Here is my webpack config:

{
  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 文件.

When I run it, I get server.js, 1.server.js, 2.server.js, etc. I'd rather just have a single server.js file.

在每个路由文件的顶部:

At the top of each route file I have:

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

当我在开发中使用 require('babel/register') 时，它可以工作，但我宁愿有一个编译文件用于生产.

Which works when I use require('babel/register') in development, but I'd rather have a compiled file for production.

推荐答案

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

I've addressed this with conditionals around the require. If it's a browser build, require.ensure, if it's a server build, just require. I use the DefinePlugin to define 'constant' variables for the environment for each build, so it would look something like

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

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

Webpack's static analysis is only smart enough to understand boolean values, so doing something like if (BUILD_TARGET === 'browser') won't work; the parser won't follow the logic and will process both requires.

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

If you're using the Uglify plugin, that will strip out the unneeded conditional logic so you don't bloat your production build.

这篇关于Webpack 在目标节点时忽略代码拆分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！