Build "entries" with presets and inject them to the presets.extendWebpack

This commit is contained in:
igor-dv 2018-08-19 17:16:17 +03:00
parent 60176a537a
commit d08fac0b1c
6 changed files with 46 additions and 28 deletions

View File

@ -8,14 +8,17 @@ function customPreset({ configDir }) {
return serverRequire(path.resolve(configDir, 'presets')) || []; return serverRequire(path.resolve(configDir, 'presets')) || [];
} }
function getBabelConfig(options, presets) {
const { configDir, wrapDefaultBabelConfig = noopWrapper } = options;
return presets.extendBabel({}, { configDir, wrapDefaultBabelConfig });
}
function getWebpackConfig(options, presets) { function getWebpackConfig(options, presets) {
const babelOptions = getBabelConfig(options, presets); const { configDir, wrapDefaultBabelConfig = noopWrapper } = options;
return presets.extendWebpack({}, { ...options, babelOptions, presets });
const babelOptions = presets.extendBabel({}, { configDir, wrapDefaultBabelConfig });
const entries = {
iframe: presets.extendPreview([], options),
manager: presets.extendManager([], options),
};
return presets.extendWebpack({}, { ...options, babelOptions, entries });
} }
export default options => { export default options => {

View File

@ -2,9 +2,8 @@ import path from 'path';
import { logger } from '@storybook/node-logger'; import { logger } from '@storybook/node-logger';
import { getInterpretedFile } from './interpret-files'; import { getInterpretedFile } from './interpret-files';
export default function getEntries(configDir, presets) { export function createPreviewEntry({ configDir }) {
const iframe = [require.resolve('./polyfills'), require.resolve('./globals')]; const iframe = [require.resolve('./polyfills'), require.resolve('./globals')];
const manager = [require.resolve('./polyfills'), require.resolve('../../client/manager')];
// Check whether a config.{ext} file exists inside the storybook // Check whether a config.{ext} file exists inside the storybook
// config directory and throw an error if it's not. // config directory and throw an error if it's not.
@ -15,6 +14,12 @@ export default function getEntries(configDir, presets) {
iframe.push(require.resolve(storybookConfigPath)); iframe.push(require.resolve(storybookConfigPath));
return iframe;
}
export function createManagerEntry({ configDir }) {
const manager = [require.resolve('./polyfills'), require.resolve('../../client/manager')];
// Check whether addons.{ext} file exists inside the storybook. // Check whether addons.{ext} file exists inside the storybook.
const storybookCustomAddonsPath = getInterpretedFile(path.resolve(configDir, 'addons')); const storybookCustomAddonsPath = getInterpretedFile(path.resolve(configDir, 'addons'));
if (storybookCustomAddonsPath) { if (storybookCustomAddonsPath) {
@ -22,8 +27,5 @@ export default function getEntries(configDir, presets) {
manager.unshift(storybookCustomAddonsPath); manager.unshift(storybookCustomAddonsPath);
} }
return { return manager;
iframe: presets.extendPreview(iframe),
manager: presets.extendManager(manager),
};
} }

View File

@ -5,14 +5,11 @@ import Dotenv from 'dotenv-webpack';
import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin'; import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import GeneratePagePlugin from 'generate-page-webpack-plugin'; import GeneratePagePlugin from 'generate-page-webpack-plugin';
import getEntries from './entries';
import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils'; import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils'; import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils';
import { version } from '../../../package.json'; import { version } from '../../../package.json';
export default ({ configDir, quiet, babelOptions, presets }) => { export default ({ configDir, quiet, babelOptions, entries }) => {
const entries = getEntries(configDir, presets);
const entriesMeta = { const entriesMeta = {
iframe: { iframe: {
headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
@ -26,13 +23,7 @@ export default ({ configDir, quiet, babelOptions, presets }) => {
return { return {
mode: 'development', mode: 'development',
devtool: 'cheap-module-source-map', devtool: 'cheap-module-source-map',
entry: { entry: entries,
...entries,
iframe: [
...entries.iframe,
`${require.resolve('webpack-hot-middleware/client')}?reload=true`,
],
},
output: { output: {
path: path.join(__dirname, 'dist'), path: path.join(__dirname, 'dist'),
filename: 'static/[name].bundle.js', filename: 'static/[name].bundle.js',

View File

@ -2,14 +2,11 @@ import webpack from 'webpack';
import { getEnvironment } from 'universal-dotenv'; import { getEnvironment } from 'universal-dotenv';
import Dotenv from 'dotenv-webpack'; import Dotenv from 'dotenv-webpack';
import GeneratePagePlugin from 'generate-page-webpack-plugin'; import GeneratePagePlugin from 'generate-page-webpack-plugin';
import getEntries from './entries';
import { version } from '../../../package.json'; import { version } from '../../../package.json';
import { includePaths, excludePaths, loadEnv, nodePaths } from './utils'; import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils'; import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils';
export default ({ configDir, babelOptions, presets }) => { export default ({ configDir, babelOptions, entries }) => {
const entries = getEntries(configDir, presets);
const entriesMeta = { const entriesMeta = {
iframe: { iframe: {
headHtmlSnippet: getPreviewHeadHtml(configDir, process.env), headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),

View File

@ -1,6 +1,7 @@
import loadCustomBabelConfig from './loadCustomBabelConfig'; import loadCustomBabelConfig from './loadCustomBabelConfig';
import createDevConfig from './config/webpack.config'; import createDevConfig from './config/webpack.config';
import defaultBabelConfig from './config/babel'; import defaultBabelConfig from './config/babel';
import { createManagerEntry, createPreviewEntry } from './config/entries';
function extendWebpack(_, options) { function extendWebpack(_, options) {
return createDevConfig(options); return createDevConfig(options);
@ -10,7 +11,20 @@ function extendBabel(_, { configDir, wrapDefaultBabelConfig }) {
return loadCustomBabelConfig(configDir) || wrapDefaultBabelConfig(defaultBabelConfig); return loadCustomBabelConfig(configDir) || wrapDefaultBabelConfig(defaultBabelConfig);
} }
function extendManager(_, options) {
return createManagerEntry(options);
}
function extendPreview(_, options) {
return [
...createPreviewEntry(options),
`${require.resolve('webpack-hot-middleware/client')}?reload=true`,
];
}
export default { export default {
extendWebpack, extendWebpack,
extendBabel, extendBabel,
extendManager,
extendPreview,
}; };

View File

@ -1,6 +1,7 @@
import loadCustomBabelConfig from './loadCustomBabelConfig'; import loadCustomBabelConfig from './loadCustomBabelConfig';
import createProdConfig from './config/webpack.config.prod'; import createProdConfig from './config/webpack.config.prod';
import defaultBabelConfig from './config/babel.prod'; import defaultBabelConfig from './config/babel.prod';
import { createManagerEntry, createPreviewEntry } from './config/entries';
function extendWebpack(_, options) { function extendWebpack(_, options) {
return createProdConfig(options); return createProdConfig(options);
@ -10,7 +11,17 @@ function extendBabel(_, { configDir, wrapDefaultBabelConfig }) {
return loadCustomBabelConfig(configDir) || wrapDefaultBabelConfig(defaultBabelConfig); return loadCustomBabelConfig(configDir) || wrapDefaultBabelConfig(defaultBabelConfig);
} }
function extendManager(_, options) {
return createManagerEntry(options);
}
function extendPreview(_, options) {
return createPreviewEntry(options);
}
export default { export default {
extendWebpack, extendWebpack,
extendBabel, extendBabel,
extendManager,
extendPreview,
}; };