Webpack игнорирует разбиение кода, когда целевой узел

Question

Webpack игнорирует разбиение кода, когда целевой узел

3

У меня есть приложение node, которое использует агент-ретранслятор для рендеринга React views на стороне сервера. Моя проблема заключается в том, что я использую 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') в разработке, но я бы предпочел иметь скомпилированный файл для производства.

Brad 12 фев. 2016, в 23:25

Источник

Теги:

javascript

reactjs

node.js

react-router

webpack

1 ответ

Ещё вопросы

Brendan Gannon · Accepted Answer · 2016-02-12T21-50-00.000Z

Я обратился к этому с условностями вокруг требования. Если это сборка браузера, require.ensure, если это сборка сервера, просто требуется. Я использую DefinePlugin для определения переменных "константа" для среды для каждой сборки, поэтому она будет выглядеть примерно как

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

Статический анализ Webpack достаточно умен, чтобы понимать логические значения, поэтому выполнение чего-то вроде if (BUILD_TARGET === 'browser') не будет работать; синтаксический анализатор не будет следовать логике и будет обрабатывать оба значения.

Если вы используете плагин Uglify, который лишит ненужную условную логику, чтобы вы не раздували вашу производственную сборку.

но затем возникает проблема с React, когда контрольные суммы не совпадают между отображаемым на стороне сервера HTML-кодом и HTML-кодом, сгенерированным на клиенте, тем самым теряя многие из «преимуществ» рендеринга на стороне сервера. Т.е. каждый сервер и клиент отображают разные HTML. Кроме того, я даже не уверен, как на клиенте условно загрузить другой JS-пакет, встроенный в DOM (который вы рендерит только для заданного маршрута), не вызывая теперь ваш основной пакет для включения тех же файлов. Кажется, это может работать только путем создания точек входа для каждого маршрута, а не ensure .