From 9eb66efb321da073660c544434833c67c0e3d39c Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Wed, 3 Aug 2016 06:55:45 +0530 Subject: [PATCH] Remove default webpack config for all config types. Now we only use the Create React App based config if there's no custom webpack config. This will fix issues like #347. --- dist/server/build.js | 2 +- dist/server/config.js | 3 +- dist/server/{ => config}/babel.js | 0 dist/server/{ => config}/babel.prod.js | 0 dist/server/config/defaults/webpack.config.js | 49 +++++++++++++++++++ .../server/{ => config}/error_enhancements.js | 0 dist/server/{ => config}/paths.js | 2 +- dist/server/{ => config}/webpack.config.js | 32 +----------- .../{ => config}/webpack.config.prod.js | 33 +------------ dist/server/middleware.js | 2 +- src/server/build.js | 2 +- src/server/config.js | 5 +- src/server/{ => config}/babel.js | 0 src/server/{ => config}/babel.prod.js | 0 src/server/config/defaults/webpack.config.js | 44 +++++++++++++++++ src/server/{ => config}/error_enhancements.js | 0 src/server/{ => config}/paths.js | 2 +- src/server/{ => config}/webpack.config.js | 33 +------------ .../{ => config}/webpack.config.prod.js | 34 +------------ src/server/middleware.js | 2 +- 20 files changed, 108 insertions(+), 137 deletions(-) rename dist/server/{ => config}/babel.js (100%) rename dist/server/{ => config}/babel.prod.js (100%) create mode 100644 dist/server/config/defaults/webpack.config.js rename dist/server/{ => config}/error_enhancements.js (100%) rename dist/server/{ => config}/paths.js (83%) rename dist/server/{ => config}/webpack.config.js (59%) rename dist/server/{ => config}/webpack.config.prod.js (59%) rename src/server/{ => config}/babel.js (100%) rename src/server/{ => config}/babel.prod.js (100%) create mode 100644 src/server/config/defaults/webpack.config.js rename src/server/{ => config}/error_enhancements.js (100%) rename src/server/{ => config}/paths.js (60%) rename src/server/{ => config}/webpack.config.js (53%) rename src/server/{ => config}/webpack.config.prod.js (55%) diff --git a/dist/server/build.js b/dist/server/build.js index 3a8f117c6b6b..056679fee1b2 100644 --- a/dist/server/build.js +++ b/dist/server/build.js @@ -25,7 +25,7 @@ var _package = require('../../package.json'); var _package2 = _interopRequireDefault(_package); -var _webpackConfig = require('./webpack.config.prod'); +var _webpackConfig = require('./config/webpack.config.prod'); var _webpackConfig2 = _interopRequireDefault(_webpackConfig); diff --git a/dist/server/config.js b/dist/server/config.js index f4168ec1eb46..f7f21da043dd 100644 --- a/dist/server/config.js +++ b/dist/server/config.js @@ -60,7 +60,8 @@ exports.default = function (configType, baseConfig, configDir) { // return the (extended) base configuration if it's not available. var customConfigPath = _path2.default.resolve(configDir, 'webpack.config.js'); if (!_fs2.default.existsSync(customConfigPath)) { - return config; + logger.info('=> Using default webpack setup based on "Create React App".'); + customConfigPath = _path2.default.resolve(__dirname, './config/defaults/webpack.config.js'); } var customConfig = require(customConfigPath); diff --git a/dist/server/babel.js b/dist/server/config/babel.js similarity index 100% rename from dist/server/babel.js rename to dist/server/config/babel.js diff --git a/dist/server/babel.prod.js b/dist/server/config/babel.prod.js similarity index 100% rename from dist/server/babel.prod.js rename to dist/server/config/babel.prod.js diff --git a/dist/server/config/defaults/webpack.config.js b/dist/server/config/defaults/webpack.config.js new file mode 100644 index 000000000000..dd600c3ee6af --- /dev/null +++ b/dist/server/config/defaults/webpack.config.js @@ -0,0 +1,49 @@ +'use strict'; + +var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); + +var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); + +var _autoprefixer = require('autoprefixer'); + +var _autoprefixer2 = _interopRequireDefault(_autoprefixer); + +var _paths = require('../paths'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +// Add a default custom config which is similar to what React Create App does. +module.exports = function (storybookBaseConfig, configType) { + var newConfig = storybookBaseConfig; + newConfig.module.loaders = [].concat((0, _toConsumableArray3.default)(newConfig.module.loaders), [{ + test: /\.css?$/, + include: _paths.includePaths, + loader: 'style!css!postcss' + }, { + test: /\.json$/, + include: _paths.includePaths, + loader: 'json' + }, { + test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/, + include: _paths.includePaths, + loader: 'file', + query: { + name: 'static/media/[name].[ext]' + } + }, { + test: /\.(mp4|webm)(\?.*)?$/, + include: _paths.includePaths, + loader: 'url', + query: { + limit: 10000, + name: 'static/media/[name].[ext]' + } + }]); + + newConfig.postcss = function () { + return [_autoprefixer2.default]; + }; + + // Return the altered config + return newConfig; +}; \ No newline at end of file diff --git a/dist/server/error_enhancements.js b/dist/server/config/error_enhancements.js similarity index 100% rename from dist/server/error_enhancements.js rename to dist/server/config/error_enhancements.js diff --git a/dist/server/paths.js b/dist/server/config/paths.js similarity index 83% rename from dist/server/paths.js rename to dist/server/config/paths.js index d005cf7f6e0d..078618c43d1b 100644 --- a/dist/server/paths.js +++ b/dist/server/config/paths.js @@ -11,4 +11,4 @@ var _path2 = _interopRequireDefault(_path); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -var includePaths = exports.includePaths = [_path2.default.resolve('./'), __dirname, _path2.default.resolve(__dirname, '../../src')]; \ No newline at end of file +var includePaths = exports.includePaths = [_path2.default.resolve('./'), __dirname, _path2.default.resolve(__dirname, '../../../src')]; \ No newline at end of file diff --git a/dist/server/webpack.config.js b/dist/server/config/webpack.config.js similarity index 59% rename from dist/server/webpack.config.js rename to dist/server/config/webpack.config.js index f6d061a1a1f1..8cc17555f678 100644 --- a/dist/server/webpack.config.js +++ b/dist/server/config/webpack.config.js @@ -14,10 +14,6 @@ var _webpack2 = _interopRequireDefault(_webpack); var _paths = require('./paths'); -var _autoprefixer = require('autoprefixer'); - -var _autoprefixer2 = _interopRequireDefault(_autoprefixer); - var _caseSensitivePathsWebpackPlugin = require('case-sensitive-paths-webpack-plugin'); var _caseSensitivePathsWebpackPlugin2 = _interopRequireDefault(_caseSensitivePathsWebpackPlugin); @@ -27,7 +23,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de var config = { devtool: '#cheap-module-eval-source-map', entry: { - manager: [_path2.default.resolve(__dirname, '../client/manager')], + manager: [_path2.default.resolve(__dirname, '../../client/manager')], preview: [_path2.default.resolve(__dirname, './error_enhancements'), 'webpack-hot-middleware/client?noInfo=true'] }, output: { @@ -42,33 +38,7 @@ var config = { loader: 'babel', query: require('./babel.js'), include: _paths.includePaths - }, { - test: /\.css?$/, - include: _paths.includePaths, - loader: 'style!css!postcss' - }, { - test: /\.json$/, - include: _paths.includePaths, - loader: 'json' - }, { - test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/, - include: _paths.includePaths, - loader: 'file', - query: { - name: 'static/media/[name].[ext]' - } - }, { - test: /\.(mp4|webm)(\?.*)?$/, - include: _paths.includePaths, - loader: 'url', - query: { - limit: 10000, - name: 'static/media/[name].[ext]' - } }] - }, - postcss: function postcss() { - return [_autoprefixer2.default]; } }; diff --git a/dist/server/webpack.config.prod.js b/dist/server/config/webpack.config.prod.js similarity index 59% rename from dist/server/webpack.config.prod.js rename to dist/server/config/webpack.config.prod.js index f5873d7c1940..7d1d72e253fa 100644 --- a/dist/server/webpack.config.prod.js +++ b/dist/server/config/webpack.config.prod.js @@ -14,15 +14,11 @@ var _webpack2 = _interopRequireDefault(_webpack); var _paths = require('./paths'); -var _autoprefixer = require('autoprefixer'); - -var _autoprefixer2 = _interopRequireDefault(_autoprefixer); - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var entries = { preview: [], - manager: [_path2.default.resolve(__dirname, '../client/manager')] + manager: [_path2.default.resolve(__dirname, '../../client/manager')] }; var config = { @@ -52,34 +48,7 @@ var config = { loader: 'babel', query: require('./babel.prod.js'), include: _paths.includePaths - }, { - test: /\.css$/, - include: _paths.includePaths, - loader: 'style!css!postcss' - }, { - test: /\.json$/, - include: _paths.includePaths, - loader: 'json' - }, { - test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/, - include: _paths.includePaths, - loader: 'file', - query: { - name: 'static/media/[name].[ext]' - } - }, { - test: /\.(mp4|webm)(\?.*)?$/, - include: _paths.includePaths, - loader: 'url', - query: { - limit: 10000, - name: 'static/media/[name].[ext]' - } }] - }, - - postcss: function postcss() { - return [_autoprefixer2.default]; } }; diff --git a/dist/server/middleware.js b/dist/server/middleware.js index c4924eb07e20..ed95ff72c862 100644 --- a/dist/server/middleware.js +++ b/dist/server/middleware.js @@ -52,7 +52,7 @@ var _webpackHotMiddleware = require('webpack-hot-middleware'); var _webpackHotMiddleware2 = _interopRequireDefault(_webpackHotMiddleware); -var _webpack3 = require('./webpack.config'); +var _webpack3 = require('./config/webpack.config'); var _webpack4 = _interopRequireDefault(_webpack3); diff --git a/src/server/build.js b/src/server/build.js index 8f33eb1bbb57..4194e434b448 100644 --- a/src/server/build.js +++ b/src/server/build.js @@ -8,7 +8,7 @@ import path from 'path'; import fs from 'fs'; import shelljs from 'shelljs'; import packageJson from '../../package.json'; -import baseConfig from './webpack.config.prod'; +import baseConfig from './config/webpack.config.prod'; import loadConfig from './config'; import getIndexHtml from './index.html'; import getIframeHtml from './iframe.html'; diff --git a/src/server/config.js b/src/server/config.js index dcb4288aa9d6..017be1aec6fc 100644 --- a/src/server/config.js +++ b/src/server/config.js @@ -96,9 +96,10 @@ export default function (configType, baseConfig, configDir) { // Check whether user has a custom webpack config file and // return the (extended) base configuration if it's not available. - const customConfigPath = path.resolve(configDir, 'webpack.config.js'); + let customConfigPath = path.resolve(configDir, 'webpack.config.js'); if (!fs.existsSync(customConfigPath)) { - return config; + logger.info('=> Using default webpack setup based on "Create React App".'); + customConfigPath = path.resolve(__dirname, './config/defaults/webpack.config.js'); } const customConfig = require(customConfigPath); diff --git a/src/server/babel.js b/src/server/config/babel.js similarity index 100% rename from src/server/babel.js rename to src/server/config/babel.js diff --git a/src/server/babel.prod.js b/src/server/config/babel.prod.js similarity index 100% rename from src/server/babel.prod.js rename to src/server/config/babel.prod.js diff --git a/src/server/config/defaults/webpack.config.js b/src/server/config/defaults/webpack.config.js new file mode 100644 index 000000000000..7daccde0902f --- /dev/null +++ b/src/server/config/defaults/webpack.config.js @@ -0,0 +1,44 @@ +import autoprefixer from 'autoprefixer'; +import { includePaths } from '../paths'; + +// Add a default custom config which is similar to what React Create App does. +module.exports = (storybookBaseConfig, configType) => { + const newConfig = storybookBaseConfig; + newConfig.module.loaders = [ + ...newConfig.module.loaders, + { + test: /\.css?$/, + include: includePaths, + loader: 'style!css!postcss', + }, + { + test: /\.json$/, + include: includePaths, + loader: 'json', + }, + { + test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/, + include: includePaths, + loader: 'file', + query: { + name: 'static/media/[name].[ext]', + }, + }, + { + test: /\.(mp4|webm)(\?.*)?$/, + include: includePaths, + loader: 'url', + query: { + limit: 10000, + name: 'static/media/[name].[ext]', + }, + }, + ]; + + newConfig.postcss = () => { + return [autoprefixer]; + }; + + // Return the altered config + return newConfig; +}; diff --git a/src/server/error_enhancements.js b/src/server/config/error_enhancements.js similarity index 100% rename from src/server/error_enhancements.js rename to src/server/config/error_enhancements.js diff --git a/src/server/paths.js b/src/server/config/paths.js similarity index 60% rename from src/server/paths.js rename to src/server/config/paths.js index 9e900bc07655..30936e2f2707 100644 --- a/src/server/paths.js +++ b/src/server/config/paths.js @@ -2,5 +2,5 @@ import path from 'path'; export const includePaths = [ path.resolve('./'), - __dirname, path.resolve(__dirname, '../../src'), + __dirname, path.resolve(__dirname, '../../../src'), ]; diff --git a/src/server/webpack.config.js b/src/server/config/webpack.config.js similarity index 53% rename from src/server/webpack.config.js rename to src/server/config/webpack.config.js index 0d3da4c3924f..efd251ae809b 100644 --- a/src/server/webpack.config.js +++ b/src/server/config/webpack.config.js @@ -1,14 +1,13 @@ import path from 'path'; import webpack from 'webpack'; import { includePaths } from './paths'; -import autoprefixer from 'autoprefixer'; import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; const config = { devtool: '#cheap-module-eval-source-map', entry: { manager: [ - path.resolve(__dirname, '../client/manager'), + path.resolve(__dirname, '../../client/manager'), ], preview: [ path.resolve(__dirname, './error_enhancements'), @@ -33,38 +32,8 @@ const config = { query: require('./babel.js'), include: includePaths, }, - { - test: /\.css?$/, - include: includePaths, - loader: 'style!css!postcss', - }, - { - test: /\.json$/, - include: includePaths, - loader: 'json', - }, - { - test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/, - include: includePaths, - loader: 'file', - query: { - name: 'static/media/[name].[ext]', - }, - }, - { - test: /\.(mp4|webm)(\?.*)?$/, - include: includePaths, - loader: 'url', - query: { - limit: 10000, - name: 'static/media/[name].[ext]', - }, - }, ], }, - postcss() { - return [autoprefixer]; - }, }; export default config; diff --git a/src/server/webpack.config.prod.js b/src/server/config/webpack.config.prod.js similarity index 55% rename from src/server/webpack.config.prod.js rename to src/server/config/webpack.config.prod.js index e2d24b2681e5..806b361646e2 100644 --- a/src/server/webpack.config.prod.js +++ b/src/server/config/webpack.config.prod.js @@ -1,12 +1,11 @@ import path from 'path'; import webpack from 'webpack'; import { includePaths } from './paths'; -import autoprefixer from 'autoprefixer'; const entries = { preview: [], manager: [ - path.resolve(__dirname, '../client/manager'), + path.resolve(__dirname, '../../client/manager'), ], }; @@ -44,39 +43,8 @@ const config = { query: require('./babel.prod.js'), include: includePaths, }, - { - test: /\.css$/, - include: includePaths, - loader: 'style!css!postcss', - }, - { - test: /\.json$/, - include: includePaths, - loader: 'json', - }, - { - test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/, - include: includePaths, - loader: 'file', - query: { - name: 'static/media/[name].[ext]', - }, - }, - { - test: /\.(mp4|webm)(\?.*)?$/, - include: includePaths, - loader: 'url', - query: { - limit: 10000, - name: 'static/media/[name].[ext]', - }, - }, ], }, - - postcss() { - return [autoprefixer]; - }, }; export default config; diff --git a/src/server/middleware.js b/src/server/middleware.js index 14fb2da14c93..87cf843fa745 100644 --- a/src/server/middleware.js +++ b/src/server/middleware.js @@ -2,7 +2,7 @@ import { Router } from 'express'; import webpack from 'webpack'; import webpackDevMiddleware from 'webpack-dev-middleware'; import webpackHotMiddleware from 'webpack-hot-middleware'; -import baseConfig from './webpack.config'; +import baseConfig from './config/webpack.config'; import loadConfig from './config'; import getIndexHtml from './index.html'; import getIframeHtml from './iframe.html';