revert back to webpack 3 for 1.0

Current Behavior

For our plugins, presets, and their respective configurations, the webpack 4 upgrade causes a lot of problems. Some plugins refer to things outside of the @webpack, error messages are generally less readable/actionable, etc.

Expected Behavior

Our existing presets, plugin, and configuration should only require minor tweaks and the impact on bundle size should not be negative.

Haul Configuration (webpack.haul.js)

import DefinePlugin from 'webpack/lib/DefinePlugin';
import NormalModuleReplacementPlugin from 'webpack/lib/NormalModuleReplacementPlugin';
import buildConfigChain from 'babel-core/lib/transformation/file/options/build-config-chain';
import load from 'babel-load-config';
import { resolve } from 'path';

function replaceReactNativePreset({ dev, platform }, dir = process.cwd()) {
  const { options: { presets, ...options } } = load(dir, buildConfigChain);
  const platforms = ['windows'];
  const providesModules = ['react-native-windows', 'react-native'];
  return {
    ...options,
    plugins: [
      require.resolve('haul/src/utils/fixRequireIssues'),
      ...(dev
        ? [
          require.resolve('react-hot-loader/babel'),
          require.resolve('haul/src/hot/babelPlugin')
        ]
        : []),
      ...(Array.isArray(options.plugins) ? options.plugins : [])
    ],
    presets: presets.map(preset => {
      if (
        !(
          preset === 'react-native' ||
          (Array.isArray(preset) && preset[0] === 'react-native')
        )
      ) { return preset; }
      return ['@rdy/babel-preset-react-native-windows', { platform, platforms, providesModules, treeShaking: true }];
    })
  };
}

function replaceBabelLoader({ dev }, rules, babelOptions) {
  const babelLoader = require.resolve('babel-loader');
  const r = rules.map(rule => {
    if (
      !Array.isArray(rule.use) ||
      !rule.use.some(use => use.loader === babelLoader)
    ) { return rule; }
    return {
      test: /\.js$/,
      exclude: /node_modules\/(?!react|@expo|pretty-format|haul)/,
      use: [
        {
          loader: require.resolve('thread-loader')
        },
        {
          loader: require.resolve('babel-loader'),
          options: {
            babelrc: false,
            cacheDirectory: dev,
            ...babelOptions
          }
        }
      ]
    };
  });
  return r;
}

function nodeModules(m) {
  return resolve(__dirname, 'node_modules', m);
}

module.exports = (options, defaults) => {
  const { dev } = options;
  const babelOptions = replaceReactNativePreset(options);
  const plugins = [
    new NormalModuleReplacementPlugin(
      new RegExp(
        require.resolve(
          'react-native/Libraries/react-native/react-native-implementation'
        )
      ),
      require.resolve(
        './src/vendor/react-native/Libraries/react-native/react-native-implementation.js'
      )
    ),
    new NormalModuleReplacementPlugin(
      new RegExp(require.resolve('react-native/Libraries/Network/fetch')),
      require.resolve('./src/vendor/react-native/Libraries/Network/fetch.js')
    ),
    new DefinePlugin({
      __BUNDLE_START_TIME__: JSON.stringify(1)
    })
  ];

  return {
    ...defaults,
    entry: './index.windows.js',
    module: {
      ...defaults.module,
      rules: [
        ...replaceBabelLoader(options, defaults.module.rules, babelOptions),
        {
          test: /\.js$/,
          include: [
            ...['@rdy', '@react-native-windows'].map(nodeModules)
          ],
          use: {
            loader: 'babel-loader',
            options: {
              babelrc: false,
              cacheDirectory: dev,
              ...babelOptions
            }
          }
        },
        {
          test: /\.js$/,
          include: [...['@react-native-windows/js-modules-navigation-redux', '@react-native-windows/js-modules-navigation', '@react-native-windows/native-modules-database', 'react-native', 'react-native-windows', '@react-native-windows'].map(nodeModules)],
          use: {
            loader: 'babel-loader',
            options: {
              babelrc: false,
              cacheDirectory: dev,
              ...babelOptions,
              plugins: [
                ...babelOptions.plugins,
                [
                  'transform-es2015-modules-commonjs',
                  { strict: false, allowTopLevelThis: true }
                ]
              ]
            }
          }
        }
      ]
    },
    plugins: [...defaults.plugins, ...plugins]
  };
};

Your Environment

We are aggressively pursuing smaller bundle sizes by employing tree-shaking via haul using webpack plugins and rewriters. We need a slightly broader ecosystem of webpack plugins to be functional than 4.0 currently allows. While we think webpack4 will provide even better bundle size performance in the future, it seems to not be ready for production (in this React Native/haul context) just yet.

software	version
Haul	master
react-native	0.49
node	8.9.4
npm or yarn	npm 5.6.0

[thymikee]

We’re eventually going to use webpack 4, so I’d like to keep it for RC. We still have beta channel with webpack 3

[thymikee]

@FredyC if there’s a critical fix we can always cherry-pick to beta channel