REFACTOR

lib/core/server.js

@@ -1,4 +1,4 @@
-const defaultWebpackConfig = require('./dist/server/preview/webpack.config.iframe.default');
+const defaultWebpackConfig = require('./dist/server/preview/base-webpack.config');
 const serverUtils = require('./dist/server/utils/template');
 const buildStatic = require('./dist/server/build-static');
 const buildDev = require('./dist/server/build-dev');

lib/core/src/server/build-static.js

@@ -13,7 +13,7 @@ import { loadEnv } from './config/utils';
 const defaultFavIcon = require.resolve('./public/favicon.ico');
 
 export async function buildStaticStandalone(options) {
-  const { outputDir, staticDir, watch, configDir } = options;
+  const { outputDir, staticDir, watch, configDir, packageJson } = options;
   const environment = loadEnv();
 
   // create output directory if not exists
@@ -47,6 +47,7 @@ export async function buildStaticStandalone(options) {
   const config = await loadConfig({
     configType: 'PRODUCTION',
     outputDir,
+    packageJson,
     corePresets: [require.resolve('./preview/core-preset-preview.js')],
     overridePresets: [require.resolve('./preview/core-preset-webpack-custom.js')],
     ...options,

lib/core/src/server/config.js

@@ -29,7 +29,7 @@ export default async options => {
 
   const presetsConfig = [
     ...corePresets,
-    require.resolve('./common/core-preset-babel-cache.js'),
+    require.resolve('./common/babel-cache-preset.js'),
     ...frameworkPresets,
     ...customPreset(options),
     ...overridePresets,
@@ -52,7 +52,7 @@ export const managerOptions = async options => {
 
   const presetsConfig = [
     ...corePresets,
-    require.resolve('./common/core-preset-babel-cache.js'),
+    require.resolve('./common/babel-cache-preset.js'),
     ...overridePresets,
   ];
 

lib/core/src/server/config/utils.js

@@ -2,38 +2,37 @@ import path from 'path';
 import { getEnvironment } from 'lazy-universal-dotenv';
 
 export const includePaths = [path.resolve('./')];
-
-export const excludePaths = [path.resolve('node_modules')];
-
 export const nodeModulesPaths = path.resolve('./node_modules');
-
-export const nodePaths = (process.env.NODE_PATH || '')
-  .split(process.platform === 'win32' ? ';' : ':')
-  .filter(Boolean)
-  .map(p => path.resolve('./', p));
+export const excludePaths = [nodeModulesPaths];
 
 // Load environment variables starts with STORYBOOK_ to the client side.
 export function loadEnv(options = {}) {
   const defaultNodeEnv = options.production ? 'production' : 'development';
   const env = {
-    NODE_ENV: JSON.stringify(process.env.NODE_ENV || defaultNodeEnv),
+    NODE_ENV: process.env.NODE_ENV || defaultNodeEnv,
     // This is to support CRA's public folder feature.
     // In production we set this to dot(.) to allow the browser to access these assets
     // even when deployed inside a subpath. (like in GitHub pages)
     // In development this is just empty as we always serves from the root.
-    PUBLIC_URL: JSON.stringify(options.production ? '.' : ''),
+    PUBLIC_URL: options.production ? '.' : '',
   };
 
   Object.keys(process.env)
     .filter(name => /^STORYBOOK_/.test(name))
     .forEach(name => {
-      env[name] = JSON.stringify(process.env[name]);
+      env[name] = process.env[name];
     });
 
-  const { stringified } = getEnvironment({ nodeEnv: JSON.parse(env.NODE_ENV) });
+  const base = Object.entries(env).reduce(
+    (acc, [k, v]) => Object.assign(acc, { [k]: JSON.stringify(v) }),
+    {}
+  );
+
+  const { stringified, raw } = getEnvironment({ nodeEnv: env.NODE_ENV });
 
   return {
-    'process.env': Object.assign({}, env, stringified),
+    stringified: Object.assign({}, base, stringified),
+    raw: Object.assign({}, env, raw),
   };
 }
 

lib/core/src/server/dev-server.js

@@ -22,7 +22,7 @@ export const webpackValid = new Promise((resolve, reject) => {
 
 export default async function(options) {
   const environment = loadEnv();
-  const { configDir } = options;
+  const configDir = path.resolve(options.configDir);
   const outputDir = path.resolve(options.outputDir || path.join(__dirname, '..', 'public'));
   const configType = 'DEVELOPMENT';
 
@@ -30,8 +30,8 @@ export default async function(options) {
   const managerPromise = childProcess
     .exec(`node ${path.join(__dirname, 'manager/webpack.js')} dir=${configDir} out=${outputDir}`, {
       env: {
-        NODE_ENV: 'production',
         ...environment,
+        NODE_ENV: 'production',
       },
     })
     .then(a => {
@@ -44,8 +44,8 @@ export default async function(options) {
   const iframeConfig = await loadConfig({
     configType,
     outputDir,
-    corePresets: [require.resolve('./preview/core-preset-preview.js')],
-    overridePresets: [require.resolve('./preview/core-preset-webpack-custom.js')],
+    corePresets: [require.resolve('./preview/preview-preset.js')],
+    overridePresets: [require.resolve('./preview/custom-webpack-preset.js')],
     ...options,
   });
 

lib/core/src/server/manager/manager-preset.js

@@ -1,7 +1,7 @@
 import loadCustomBabelConfig from '../utils/load-custom-babel-config';
 import loadCustomAddons from '../utils/load-custom-addons-file';
 import loadCustomConfig from '../utils/load-custom-config-file';
-import createDevConfig from './webpack.config.manager';
+import createDevConfig from './manager-webpack.config';
 import babelConfig from '../common/babel';
 
 export async function managerWebpack(_, options) {

lib/core/src/server/manager/manager-webpack.config.js

@@ -6,16 +6,10 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 
 import { version } from '../../../package.json';
 import { getManagerHeadHtml } from '../utils/template';
-import {
-  includePaths,
-  excludePaths,
-  loadEnv,
-  nodePaths,
-  getBabelRuntimePath,
-} from '../config/utils';
+import { excludePaths, loadEnv, getBabelRuntimePath } from '../config/utils';
 
 export default ({ configDir, babelOptions, entries, outputDir }) => {
-  const environment = loadEnv();
+  const { raw, stringified } = loadEnv();
 
   return {
     name: 'manager',
@@ -44,7 +38,7 @@ export default ({ configDir, babelOptions, entries, outputDir }) => {
         template: require.resolve(`../templates/index.ejs`),
       }),
       new HtmlWebpackHarddiskPlugin(),
-      new webpack.DefinePlugin(environment),
+      new webpack.DefinePlugin({ 'process.env': stringified }),
       new CaseSensitivePathsPlugin(),
       new Dotenv({ silent: true }),
     ],
@@ -58,7 +52,6 @@ export default ({ configDir, babelOptions, entries, outputDir }) => {
               options: babelOptions,
             },
           ],
-          include: includePaths,
           exclude: excludePaths,
         },
         {
@@ -72,24 +65,16 @@ export default ({ configDir, babelOptions, entries, outputDir }) => {
       ],
     },
     resolve: {
-      // Since we ship with json-loader always, it's better to move extensions to here
-      // from the default config.
       extensions: ['.mjs', '.js', '.jsx', '.json'],
-      // Add support to NODE_PATH. With this we could avoid relative path imports.
-      // Based on this CRA feature: https://github.com/facebookincubator/create-react-app/issues/253
-      modules: ['node_modules'].concat(nodePaths),
+      modules: ['node_modules'].concat(raw.NODE_PATH ? raw.NODE_PATH : []),
       alias: {
         '@babel/runtime': getBabelRuntimePath(),
       },
     },
     optimization: {
-      // Automatically split vendor and commons for preview bundle
-      // https://twitter.com/wSokra/status/969633336732905474
-      // splitChunks: {
-      //   chunks: chunk => chunk.name !== 'manager',
-      // },
-      // Keep the runtime chunk separated to enable long term caching
-      // https://twitter.com/wSokra/status/969679223278505985
+      splitChunks: {
+        chunks: 'all',
+      },
       runtimeChunk: true,
     },
   };

lib/core/src/server/manager/webpack.js

@@ -20,7 +20,7 @@ const good = new Console(process.stdout);
 loadConfig({
   outputDir,
   configDir,
-  corePresets: [require.resolve('./core-preset-manager.js')],
+  corePresets: [require.resolve('./manager-preset.js')],
 })
   .then(config => webpack(config))
   .then(

lib/core/src/server/preview/base-webpack.config.js

@@ -20,10 +20,10 @@ export function createDefaultWebpackConfig(storybookBaseConfig) {
             {
               loader: require.resolve('postcss-loader'),
               options: {
-                ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+                ident: 'postcss',
                 postcss: {},
                 plugins: () => [
-                  require('postcss-flexbugs-fixes'), // eslint-disable-line
+                  require('postcss-flexbugs-fixes'), // eslint-disable-line global-require
                   autoprefixer({
                     flexbox: 'no-2009',
                   }),

lib/core/src/server/preview/custom-webpack-preset.js

@@ -1,7 +1,7 @@
 import { logger } from '@storybook/node-logger';
 import loadCustomWebpackConfig from '../utils/load-custom-webpack-config';
 import mergeConfigs from '../utils/merge-webpack-config';
-import { createDefaultWebpackConfig } from './webpack.config.iframe.default';
+import { createDefaultWebpackConfig } from './base-webpack.config';
 
 function logConfigName(defaultConfigName) {
   if (!defaultConfigName) {

lib/core/src/server/preview/iframe-webpack.config.js

@@ -10,7 +10,6 @@ import {
   excludePaths,
   nodeModulesPaths,
   loadEnv,
-  nodePaths,
   getBabelRuntimePath,
 } from '../config/utils';
 import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils/template';
@@ -24,9 +23,11 @@ export default ({
   packageJson,
   configType,
 }) => {
-  const environment = loadEnv({ production: true });
+  const { raw, stringified } = loadEnv({ production: true });
   const isProd = configType === 'PRODUCTION';
 
+  console.log({ raw });
+
   return {
     mode: isProd ? 'production' : 'development',
     bail: isProd,
@@ -53,7 +54,7 @@ export default ({
         }),
         template: require.resolve(`../templates/index.ejs`),
       }),
-      new webpack.DefinePlugin(environment),
+      new webpack.DefinePlugin({ 'process.env': stringified }),
       isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths),
       isProd ? null : new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),
@@ -85,7 +86,7 @@ export default ({
     },
     resolve: {
       extensions: ['.mjs', '.js', '.jsx', '.json'],
-      modules: ['node_modules'].concat(nodePaths),
+      modules: ['node_modules'].concat(raw.NODE_PATH ? raw.NODE_PATH : []),
       mainFields: ['browser', 'main', 'module'],
       alias: {
         '@babel/runtime': getBabelRuntimePath(),

lib/core/src/server/preview/preview-preset.js

@@ -2,7 +2,7 @@ import loadCustomBabelConfig from '../utils/load-custom-babel-config';
 import loadCustomConfig from '../utils/load-custom-config-file';
 import babelConfig from '../common/babel';
 
-import webpackConfig from './webpack.config.iframe';
+import webpackConfig from './iframe-webpack.config';
 import { createPreviewEntry } from './entries';
 
 export const webpack = async (_, options) => webpackConfig(options);