Migrate all apps to Webpack 4

storybookjs · Mar 4, 2018 · 120a273 · 120a273
1 parent 86383b5
commit 120a273
Show file tree

Hide file tree

Showing 28 changed files with 66 additions and 199 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -3,6 +3,8 @@ build
 coverage
 node_modules
 docs/public
+storybook-static
+built-storybooks
 lib/cli/test
 *.bundle.js
 *.js.map

diff --git a/app/angular/package.json b/app/angular/package.json
@@ -52,9 +52,8 @@
     "redux": "^3.6.0",
     "sass-loader": "^6.0.7",
     "ts-loader": "^4.0.1",
-    "uglifyjs-webpack-plugin": "^1.2.2",
     "util-deprecate": "^1.0.2",
-    "webpack": "^4.0.1",
+    "webpack": "^4.1.0",
     "webpack-hot-middleware": "^2.21.2",
     "zone.js": "^0.8.20"
   },

diff --git a/app/angular/src/server/config/webpack.config.js b/app/angular/src/server/config/webpack.config.js
@@ -1,19 +1,20 @@
 import path from 'path';
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
-import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
+// 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 { managerPath } from '@storybook/core/server';
 
-import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
+import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
 import babelLoaderConfig from './babel';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import { version } from '../../../package.json';
 
 export default function(configDir) {
   const config = {
+    mode: 'development',
     devtool: 'cheap-module-source-map',
     entry: {
       manager: [require.resolve('./polyfills'), managerPath],
@@ -29,7 +30,6 @@ export default function(configDir) {
       publicPath: '/',
     },
     plugins: [
-      new InterpolateHtmlPlugin(process.env),
       new HtmlWebpackPlugin({
         filename: 'index.html',
         chunks: ['manager'],
@@ -47,10 +47,11 @@ export default function(configDir) {
         },
         template: require.resolve('../iframe.html.ejs'),
       }),
+      // new InterpolateHtmlPlugin(process.env),
       new webpack.DefinePlugin(loadEnv()),
       new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),
-      new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+      // new WatchMissingNodeModulesPlugin(nodeModulesPaths),
       new webpack.ProgressPlugin(),
       new webpack.ContextReplacementPlugin(
         /angular(\\|\/)core(\\|\/)(@angular|esm5)/,

diff --git a/app/angular/src/server/config/webpack.config.prod.js b/app/angular/src/server/config/webpack.config.prod.js
@@ -1,8 +1,7 @@
 import path from 'path';
 import webpack from 'webpack';
-import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
+// import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { managerPath } from '@storybook/core/server';
 
@@ -18,6 +17,7 @@ export default function(configDir) {
   };
 
   const config = {
+    mode: 'production',
     bail: true,
     devtool: '#cheap-module-source-map',
     entry: entries,
@@ -31,7 +31,6 @@ export default function(configDir) {
       publicPath: '',
     },
     plugins: [
-      new InterpolateHtmlPlugin(process.env),
       new HtmlWebpackPlugin({
         filename: 'index.html',
         chunks: ['manager'],
@@ -49,21 +48,8 @@ export default function(configDir) {
         },
         template: require.resolve('../iframe.html.ejs'),
       }),
+      // new InterpolateHtmlPlugin(process.env),
       new webpack.DefinePlugin(loadEnv({ production: true })),
-      new UglifyJsPlugin({
-        parallel: true,
-        uglifyOptions: {
-          ie8: false,
-          mangle: false,
-          warnings: false,
-          compress: {
-            keep_fnames: true,
-          },
-          output: {
-            comments: false,
-          },
-        },
-      }),
       new webpack.ContextReplacementPlugin(
         /angular(\\|\/)core(\\|\/)(@angular|esm5)/,
         path.resolve(__dirname, '../src')

diff --git a/app/polymer/package.json b/app/polymer/package.json
@@ -53,9 +53,8 @@
     "react-dev-utils": "^5.0.0",
     "react-dom": "^16.0.0",
     "redux": "^3.7.2",
-    "uglifyjs-webpack-plugin": "^1.2.2",
     "util-deprecate": "^1.0.2",
-    "webpack": "^4.0.1",
+    "webpack": "^4.1.0",
     "webpack-hot-middleware": "^2.21.2"
   },
   "devDependencies": {

diff --git a/app/polymer/src/server/config/webpack.config.js b/app/polymer/src/server/config/webpack.config.js
@@ -1,20 +1,21 @@
 import path from 'path';
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
-import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
+// 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 CopyWebpackPlugin from 'copy-webpack-plugin';
 import { managerPath } from '@storybook/core/server';
 
-import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
+import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import babelLoaderConfig from './babel';
 import { version } from '../../../package.json';
 
 export default function(configDir) {
   const config = {
+    mode: 'development',
     devtool: 'cheap-module-source-map',
     entry: {
       manager: [require.resolve('./polyfills'), managerPath],
@@ -30,7 +31,6 @@ export default function(configDir) {
       publicPath: '/',
     },
     plugins: [
-      new InterpolateHtmlPlugin(process.env),
       new HtmlWebpackPlugin({
         filename: 'index.html',
         chunks: ['manager'],
@@ -48,14 +48,15 @@ export default function(configDir) {
         },
         template: require.resolve('../iframe.html.ejs'),
       }),
+      // new InterpolateHtmlPlugin(process.env),
       new CopyWebpackPlugin([
         { from: require.resolve('@webcomponents/webcomponentsjs/webcomponents-lite.js') },
         { from: require.resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js') },
       ]),
       new webpack.DefinePlugin(loadEnv()),
       new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),
-      new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+      // new WatchMissingNodeModulesPlugin(nodeModulesPaths),
       new webpack.ProgressPlugin(),
       new Dotenv({ silent: true }),
     ],

diff --git a/app/polymer/src/server/config/webpack.config.prod.js b/app/polymer/src/server/config/webpack.config.prod.js
@@ -1,7 +1,6 @@
 import webpack from 'webpack';
-import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
+// import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import { managerPath } from '@storybook/core/server';
@@ -17,6 +16,7 @@ export default function(configDir) {
   };
 
   const config = {
+    mode: 'production',
     bail: true,
     devtool: '#cheap-module-source-map',
     entry: entries,
@@ -30,7 +30,6 @@ export default function(configDir) {
       publicPath: '',
     },
     plugins: [
-      new InterpolateHtmlPlugin(process.env),
       new HtmlWebpackPlugin({
         filename: 'index.html',
         chunks: ['manager'],
@@ -48,25 +47,12 @@ export default function(configDir) {
         },
         template: require.resolve('../iframe.html.ejs'),
       }),
+      // new InterpolateHtmlPlugin(process.env),
       new CopyWebpackPlugin([
         { from: require.resolve('@webcomponents/webcomponentsjs/webcomponents-lite.js') },
         { from: require.resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js') },
       ]),
       new webpack.DefinePlugin(loadEnv({ production: true })),
-      new UglifyJsPlugin({
-        parallel: true,
-        uglifyOptions: {
-          ie8: false,
-          mangle: false,
-          warnings: false,
-          compress: {
-            keep_fnames: true,
-          },
-          output: {
-            comments: false,
-          },
-        },
-      }),
       new Dotenv({ silent: true }),
     ],
     module: {

diff --git a/app/react-native/package.json b/app/react-native/package.json
@@ -57,11 +57,10 @@
     "react-native-compat": "^1.0.0",
     "react-native-iphone-x-helper": "^1.0.2",
     "shelljs": "^0.8.1",
-    "uglifyjs-webpack-plugin": "^1.2.2",
     "url-parse": "^1.1.9",
     "util-deprecate": "^1.0.2",
     "uuid": "^3.2.1",
-    "webpack": "^4.0.1",
+    "webpack": "^4.1.0",
     "webpack-dev-middleware": "^3.0.0",
     "webpack-hot-middleware": "^2.21.2",
     "ws": "^4.1.0"

diff --git a/app/react-native/src/server/config/utils.js b/app/react-native/src/server/config/utils.js
@@ -1,12 +1,5 @@
-import webpack from 'webpack';
 import path from 'path';
 
-export const OccurenceOrderPlugin =
-  // for webpack 2
-  webpack.optimize.OccurrenceOrderPlugin ||
-  // for webpack 1
-  webpack.optimize.OccurenceOrderPlugin;
-
 export const includePaths = [path.resolve('./')];
 
 export const excludePaths = [path.resolve('./node_modules')];

diff --git a/app/react-native/src/server/config/webpack.config.js b/app/react-native/src/server/config/webpack.config.js
@@ -1,11 +1,12 @@
 import path from 'path';
 import webpack from 'webpack';
-import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
+// import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { OccurenceOrderPlugin, includePaths, excludePaths, nodeModulesPaths } from './utils';
+import { includePaths, excludePaths } from './utils';
 
 const getConfig = options => ({
+  mode: 'development',
   devtool: '#cheap-module-eval-source-map',
   entry: {
     manager: [require.resolve('../../manager')],
@@ -23,10 +24,9 @@ const getConfig = options => ({
       },
       template: require.resolve('../index.html.ejs'),
     }),
-    new OccurenceOrderPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     new CaseSensitivePathsPlugin(),
-    new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+    // new WatchMissingNodeModulesPlugin(nodeModulesPaths),
   ],
   module: {
     rules: [

diff --git a/app/react-native/src/server/config/webpack.config.prod.js b/app/react-native/src/server/config/webpack.config.prod.js
@@ -1,11 +1,11 @@
 import path from 'path';
 import webpack from 'webpack';
-import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { OccurenceOrderPlugin, includePaths, excludePaths } from './utils';
+import { includePaths, excludePaths } from './utils';
 
 const getConfig = options => {
   const config = {
+    mode: 'production',
     bail: true,
     devtool: '#cheap-module-source-map',
     entry: {
@@ -31,20 +31,6 @@ const getConfig = options => {
       }),
       new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
       new webpack.optimize.DedupePlugin(),
-      new UglifyJsPlugin({
-        parallel: true,
-        uglifyOptions: {
-          ie8: false,
-          mangle: false,
-          warnings: false,
-          compress: {
-            keep_fnames: true,
-          },
-          output: {
-            comments: false,
-          },
-        },
-      }),
     ],
     module: {
       rules: [
@@ -70,12 +56,6 @@ const getConfig = options => {
     },
   };
 
-  // Webpack 2 doesn't have a OccurenceOrderPlugin plugin in the production mode.
-  // But webpack 1 has it. That's why we do this.
-  if (OccurenceOrderPlugin) {
-    config.plugins.unshift(new OccurenceOrderPlugin());
-  }
-
   return config;
 };
 

diff --git a/app/react/package.json b/app/react/package.json
@@ -58,9 +58,8 @@
     "prop-types": "^15.6.1",
     "react-dev-utils": "^6.0.0-next.47d2d941",
     "redux": "^3.7.2",
-    "uglifyjs-webpack-plugin": "^1.2.2",
     "util-deprecate": "^1.0.2",
-    "webpack": "^4.0.1",
+    "webpack": "^4.1.0",
     "webpack-hot-middleware": "^2.21.2"
   },
   "devDependencies": {

diff --git a/app/react/src/server/config/webpack.config.js b/app/react/src/server/config/webpack.config.js
@@ -1,6 +1,8 @@
 import path from 'path';
 import webpack from 'webpack';
 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 { managerPath } from '@storybook/core/server';
@@ -28,7 +30,6 @@ export default function(configDir) {
       publicPath: '/',
     },
     plugins: [
-      // new InterpolateHtmlPlugin(process.env),
       new HtmlWebpackPlugin({
         filename: 'index.html',
         chunks: ['manager'],
@@ -46,6 +47,7 @@ export default function(configDir) {
         },
         template: require.resolve('../iframe.html.ejs'),
       }),
+      // new InterpolateHtmlPlugin(process.env),
       new webpack.DefinePlugin(loadEnv()),
       new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),