react-cosmos/dist/plugins/webpack/webpackConfig/getDefaultWebpackConfig.js

CLI for running React Cosmos inside webpack-powered apps

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getDefaultWebpackConfig = getDefaultWebpackConfig;

var _resolveFrom = _interopRequireDefault(require("resolve-from"));

var _playgroundHtml = require("../../../shared/playgroundHtml");

var _getWebpackNodeEnv = require("./getWebpackNodeEnv");

var _htmlPlugin = require("./htmlPlugin");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

// This config doesn't have entry and output set up because it's not meant to
// work standalone. An entry & output will be added to this base config.
function getDefaultWebpackConfig(userWebpack, rootDir) {
  // react-cosmos doesn't directly depend on any webpack loader.
  // Instead, it includes the ones already installed by the user.
  var tsLoaderPath = _resolveFrom.default.silent(rootDir, 'ts-loader');

  var babelLoaderPath = _resolveFrom.default.silent(rootDir, 'next/dist/compiled/babel-loader') || _resolveFrom.default.silent(rootDir, 'babel-loader');

  var styleLoaderPath = _resolveFrom.default.silent(rootDir, 'style-loader');

  var cssLoaderPath = _resolveFrom.default.silent(rootDir, 'css-loader');

  var postcssLoaderPath = _resolveFrom.default.silent(rootDir, 'postcss-loader'); // Note: Since webpack >= v2.0.0, importing of JSON files will work by default


  var jsonLoaderPath = _resolveFrom.default.silent(rootDir, 'json-loader');

  var rules = [];
  var plugins = []; // Prefer babel-loader over ts-loader if user has both installed. If user
  // has babel-loader installed then most likely they won't want ts-loader
  // to handle module transformation.

  if (babelLoaderPath) {
    rules.push({
      test: /\.(js|ts)x?$/,
      exclude: /node_modules/,
      use: {
        loader: babelLoaderPath,
        options: {
          root: rootDir
        }
      }
    });
  } else if (tsLoaderPath) {
    rules.push({
      test: /\.tsx?$/,
      loader: tsLoaderPath
    });
  }

  if (styleLoaderPath && cssLoaderPath) {
    if (postcssLoaderPath) {
      rules.push({
        test: /\.css$/,
        use: [styleLoaderPath, {
          loader: cssLoaderPath,
          options: {
            importLoaders: 1
          }
        }, postcssLoaderPath],
        exclude: /node_modules/
      });
    } else {
      rules.push({
        test: /\.css$/,
        use: [{
          loader: styleLoaderPath
        }, {
          loader: cssLoaderPath
        }],
        exclude: /node_modules/
      });
    } // Preprocess 3rd party .css files located in node_modules


    rules.push({
      test: /\.css$/,
      use: [{
        loader: styleLoaderPath
      }, {
        loader: cssLoaderPath
      }],
      include: /node_modules/
    });
  }

  if (jsonLoaderPath) {
    rules.push({
      test: /\.json$/,
      loader: jsonLoaderPath,
      exclude: /node_modules/
    });
  }

  var htmlWebpackPlugin = (0, _htmlPlugin.getHtmlWebpackPlugin)(rootDir);

  if (htmlWebpackPlugin) {
    plugins.push(new htmlWebpackPlugin({
      title: 'React Cosmos',
      filename: _playgroundHtml.RENDERER_FILENAME
    }));
  }

  var config = {
    // Besides other advantages, cheap-module-source-map is compatible with
    // React.componentDidCatch https://github.com/facebook/react/issues/10441
    devtool: 'cheap-module-source-map',
    resolve: {
      // Warning: webpack 1.x expects ['', '.js', '.jsx']
      extensions: ['.js', '.jsx', '.ts', '.tsx']
    },
    module: {
      // Note: `module.rules` only works with webpack >=2.x. For 1.x
      // compatibility a custom webpack config (with module.loaders) is required
      rules: rules
    },
    plugins: plugins,
    stats: 'minimal',
    infrastructureLogging: {
      level: 'warn'
    }
  };
  var webpack4 = userWebpack.version && parseInt(userWebpack.version, 10) >= 4;

  if (!webpack4) {
    return config;
  }

  return _objectSpread(_objectSpread({}, config), {}, {
    mode: (0, _getWebpackNodeEnv.getWebpackNodeEnv)(),
    optimization: {
      // Cosmos reads component names at run-time, so it is crucial to not
      // minify even when building with production env (ie. when exporting)
      // https://github.com/react-cosmos/react-cosmos/issues/701
      minimize: false
    }
  });
}