Skip to content

Commit

Permalink
CHANGE html-webpack-plugin for generate-page-webpack-plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
ndelangen committed Aug 2, 2018
1 parent fbedf99 commit 78d8c6c
Show file tree
Hide file tree
Showing 21 changed files with 394 additions and 295 deletions.
3 changes: 2 additions & 1 deletion app/react-native/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,11 @@
"case-sensitive-paths-webpack-plugin": "^2.1.2",
"commander": "^2.15.1",
"dotenv-webpack": "^1.5.7",
"ejs": "^2.6.1",
"express": "^4.16.3",
"find-cache-dir": "^1.0.0",
"generate-page-webpack-plugin": "^1.0.0",
"global": "^4.3.2",
"html-webpack-plugin": "^3.2.0",
"json5": "^1.0.1",
"prop-types": "^15.6.1",
"raw-loader": "^0.5.1",
Expand Down
2 changes: 1 addition & 1 deletion app/react-native/src/server/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export default function(configType, baseConfig, projectDir, configDir) {

if (typeof customConfig === 'function') {
logger.info('=> Loading custom webpack config (full-control mode).');
return customConfig(config, configType, defaultConfig);
return customConfig(config, configType, defaultConfig, configDir);
}

logger.info('=> Loading custom webpack config.');
Expand Down
111 changes: 65 additions & 46 deletions app/react-native/src/server/config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,54 +4,73 @@ import { getEnvironment } from 'universal-dotenv';
import Dotenv from 'dotenv-webpack';
import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { indexHtmlPath } from '@storybook/core/server';
import { version } from '../../../package.json';

import GeneratePagePlugin from 'generate-page-webpack-plugin';

import { getManagerHeadHtml } from '@storybook/core/server';

import { includePaths, excludePaths, nodeModulesPaths } from './utils';
import { version } from '../../../package.json';

const getConfig = options => {
const entriesMeta = {
manager: {
headHtmlSnippet: getManagerHeadHtml(options.configDir, process.env),
},
};

const getConfig = options => ({
mode: 'development',
devtool: '#cheap-module-eval-source-map',
entry: {
manager: [require.resolve('../../manager')],
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'static/[name].bundle.js',
publicPath: '/',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
data: {
version,
},
template: indexHtmlPath,
}),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(nodeModulesPaths),
new webpack.DefinePlugin(getEnvironment().webpack),
new Dotenv({ silent: true }),
new webpack.DefinePlugin({
storybookOptions: JSON.stringify(options),
}),
],
module: {
rules: [
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
query: require('./babel.js'), // eslint-disable-line
include: includePaths,
exclude: excludePaths,
},
{
test: /\.md$/,
loader: require.resolve('raw-loader'),
},
return {
mode: 'development',
devtool: '#cheap-module-eval-source-map',
entry: {
manager: [require.resolve('../../manager')],
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'static/[name].bundle.js',
publicPath: '/',
},
plugins: [
new GeneratePagePlugin(
{
template: require.resolve('@storybook/core/dist/server/templates/index.html.ejs'),
// eslint-disable-next-line global-require
parser: require('ejs'),
filename: entry => (entry === 'manager' ? 'index' : entry),
},
{
data: { version },
headHtmlSnippet: entry =>
entriesMeta[entry] ? entriesMeta[entry].headHtmlSnippet : null,
bodyHtmlSnippet: entry =>
entriesMeta[entry] ? entriesMeta[entry].bodyHtmlSnippet : null,
}
),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(nodeModulesPaths),
new webpack.DefinePlugin(getEnvironment().webpack),
new Dotenv({ silent: true }),
new webpack.DefinePlugin({
storybookOptions: JSON.stringify(options),
}),
],
},
});
module: {
rules: [
{
test: /\.jsx?$/,
loader: require.resolve('babel-loader'),
query: require('./babel.js'), // eslint-disable-line
include: includePaths,
exclude: excludePaths,
},
{
test: /\.md$/,
loader: require.resolve('raw-loader'),
},
],
},
};
};

export default getConfig;
22 changes: 14 additions & 8 deletions app/react-native/src/server/config/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@ import path from 'path';
import webpack from 'webpack';
import { getEnvironment } from 'universal-dotenv';
import Dotenv from 'dotenv-webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import { indexHtmlPath } from '@storybook/core/server';
import GeneratePagePlugin from 'generate-page-webpack-plugin';

import { getManagerHeadHtml } from '@storybook/core/dist/server/utils';
import { version } from '../../../package.json';
import { includePaths, excludePaths } from './utils';

Expand All @@ -26,13 +27,18 @@ const getConfig = options => {
publicPath: '/',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
data: {
version,
new GeneratePagePlugin(
{
template: require.resolve('@storybook/core/dist/server/templates/index.html.ejs'),
// eslint-disable-next-line global-require
parser: require('ejs'),
filename: entry => (entry === 'manager' ? 'index' : entry),
},
template: indexHtmlPath,
}),
{
data: { version },
headHtmlSnippet: getManagerHeadHtml(options.configDir, process.env),
}
),
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"',
storybookOptions: JSON.stringify(options),
Expand Down
3 changes: 2 additions & 1 deletion app/react-native/src/server/middleware.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ function getMiddleware(configDir) {
return () => {};
}

export default function({ projectDir, configDir, ...options }) {
export default function(options) {
const { projectDir, configDir } = options;
// Build the webpack configuration using the `baseConfig`
// custom `.babelrc` file and `webpack.config.js` files
const environment = options.environment || 'DEVELOPMENT';
Expand Down
2 changes: 1 addition & 1 deletion examples/cra-kitchen-sink/.storybook/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ setOptions({
sortStoriesByKind: false,
hierarchySeparator: /\./,
hierarchyRootSeparator: /\|/,
enableShortcuts: false,
enableShortcuts: true,
});

function loadStories() {
Expand Down
4 changes: 2 additions & 2 deletions lib/cli/test/snapshots/meteor/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@
"dependencies": {
"babel-runtime": "^6.20.0",
"meteor-node-stubs": "~0.2.4",
"react": "^16.4.1",
"react-dom": "^16.4.1"
"react": "^16.4.2",
"react-dom": "^16.4.2"
},
"devDependencies": {
"babel-core": "^6.26.3",
Expand Down
3 changes: 2 additions & 1 deletion lib/core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,13 @@
"core-js": "^2.5.7",
"css-loader": "^0.28.11",
"dotenv-webpack": "^1.5.7",
"ejs": "^2.6.1",
"emotion": "^9.1.3",
"express": "^4.16.3",
"file-loader": "^1.1.11",
"find-cache-dir": "^1.0.0",
"generate-page-webpack-plugin": "^1.0.0",
"global": "^4.3.2",
"html-webpack-plugin": "^3.2.0",
"interpret": "^1.1.0",
"json5": "^1.0.1",
"postcss-flexbugs-fixes": "^3.3.1",
Expand Down
5 changes: 1 addition & 4 deletions lib/core/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,4 @@ const serverUtils = require('./dist/server/utils');
const buildStatic = require('./dist/server/build-static');
const buildDev = require('./dist/server/build-dev');

module.exports = assign({}, defaultWebpackConfig, buildStatic, buildDev, serverUtils, {
indexHtmlPath: require.resolve('./src/server/index.html.ejs'),
iframeHtmlPath: require.resolve('./src/server/iframe.html.ejs'),
});
module.exports = assign({}, defaultWebpackConfig, buildStatic, buildDev, serverUtils, {});
6 changes: 3 additions & 3 deletions lib/core/src/server/config/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function loadEnv(options = {}) {
}

export function getEntries(configDir) {
const preview = [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
Expand All @@ -47,7 +47,7 @@ export function getEntries(configDir) {
throw new Error(`=> Create a storybook config file in "${configDir}/config.{ext}".`);
}

preview.push(require.resolve(storybookConfigPath));
iframe.push(require.resolve(storybookConfigPath));

// Check whether addons.{ext} file exists inside the storybook.
const storybookCustomAddonsPath = getInterpretedFile(path.resolve(configDir, 'addons'));
Expand All @@ -56,5 +56,5 @@ export function getEntries(configDir) {
manager.unshift(storybookCustomAddonsPath);
}

return { preview, manager };
return { iframe, manager };
}
53 changes: 28 additions & 25 deletions lib/core/src/server/config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ import path from 'path';
import webpack from 'webpack';
import { getEnvironment } from 'universal-dotenv';
import Dotenv from 'dotenv-webpack';
import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';

import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
import GeneratePagePlugin from 'generate-page-webpack-plugin';
import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils';

import {
includePaths,
Expand All @@ -21,13 +19,23 @@ import { version } from '../../../package.json';

export default ({ configDir, quiet, babelOptions }) => {
const entries = getEntries(configDir, true);
const entriesMeta = {
iframe: {
headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
bodyHtmlSnippet: getPreviewBodyHtml(),
},
manager: {
headHtmlSnippet: getManagerHeadHtml(configDir, process.env),
},
};

return {
mode: 'development',
devtool: 'cheap-module-source-map',
entry: {
...entries,
preview: [
...entries.preview,
iframe: [
...entries.iframe,
`${require.resolve('webpack-hot-middleware/client')}?reload=true`,
],
},
Expand All @@ -42,26 +50,21 @@ export default ({ configDir, quiet, babelOptions }) => {
publicPath: '',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
chunks: ['manager'],
chunksSortMode: 'none',
data: {
managerHead: getManagerHeadHtml(configDir),
version,
},
template: require.resolve('../index.html.ejs'),
}),
new HtmlWebpackPlugin({
filename: 'iframe.html',
excludeChunks: ['manager'],
chunksSortMode: 'none',
data: {
previewHead: getPreviewHeadHtml(configDir),
new GeneratePagePlugin(
{
template: require.resolve('../templates/index.html.ejs'),
// eslint-disable-next-line global-require
parser: require('ejs'),
filename: entry => (entry === 'manager' ? 'index' : entry),
},
template: require.resolve('../iframe.html.ejs'),
}),
new InterpolateHtmlPlugin(process.env),
{
data: { version },
headHtmlSnippet: entry =>
entriesMeta[entry] ? entriesMeta[entry].headHtmlSnippet : null,
bodyHtmlSnippet: entry =>
entriesMeta[entry] ? entriesMeta[entry].bodyHtmlSnippet : null,
}
),
new webpack.DefinePlugin(loadEnv()),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
Expand Down
Loading

0 comments on commit 78d8c6c

Please sign in to comment.