From ac2d7de64e85d9ecebd243f08d00e073c2ab686f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 11 Oct 2018 21:05:35 +0200 Subject: [PATCH 1/5] CHANGE back to use html-webpack-plugin to keep compatibility with plugin that depend on it. --- examples/polymer-cli/package.json | 2 +- lib/cli/test/fixtures/sfc_vue/package.json | 2 +- lib/core/package.json | 2 +- .../src/server/config/webpack.config.dev.js | 36 ++++++----- lib/core/src/server/templates/index.ejs | 46 ++++++++++++++ lib/core/src/server/templates/index.html.ejs | 62 ------------------- yarn.lock | 22 ++++++- 7 files changed, 91 insertions(+), 81 deletions(-) create mode 100644 lib/core/src/server/templates/index.ejs delete mode 100644 lib/core/src/server/templates/index.html.ejs diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json index 683e5503bc38..3d6d467c6451 100644 --- a/examples/polymer-cli/package.json +++ b/examples/polymer-cli/package.json @@ -26,7 +26,7 @@ }, "devDependencies": { "copy-webpack-plugin": "^4.5.3", - "html-webpack-plugin": "^3.2.0", + "html-webpack-plugin": "^4.0.0-beta.1", "webpack-dev-server": "^3.1.9" } } diff --git a/lib/cli/test/fixtures/sfc_vue/package.json b/lib/cli/test/fixtures/sfc_vue/package.json index f40d25cbbbc9..55f7869b5fda 100644 --- a/lib/cli/test/fixtures/sfc_vue/package.json +++ b/lib/cli/test/fixtures/sfc_vue/package.json @@ -31,7 +31,7 @@ "extract-text-webpack-plugin": "^2.0.0", "file-loader": "^0.11.1", "friendly-errors-webpack-plugin": "^1.1.3", - "html-webpack-plugin": "^2.28.0", + "html-webpack-plugin": "^4.0.0-beta.1", "http-proxy-middleware": "^0.17.3", "opn": "^5.1.0", "optimize-css-assets-webpack-plugin": "^2.0.0", diff --git a/lib/core/package.json b/lib/core/package.json index 3851b4b97af3..ede16c99724b 100644 --- a/lib/core/package.json +++ b/lib/core/package.json @@ -51,8 +51,8 @@ "express": "^4.16.3", "file-loader": "^2.0.0", "find-cache-dir": "^2.0.0", - "generate-page-webpack-plugin": "^1.1.1", "global": "^4.3.2", + "html-webpack-plugin": "^4.0.0-beta.1", "inquirer": "^6.2.0", "interpret": "^1.1.0", "ip": "^1.1.5", diff --git a/lib/core/src/server/config/webpack.config.dev.js b/lib/core/src/server/config/webpack.config.dev.js index 4b320bc5526f..3edaa7649155 100644 --- a/lib/core/src/server/config/webpack.config.dev.js +++ b/lib/core/src/server/config/webpack.config.dev.js @@ -4,7 +4,9 @@ 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 GeneratePagePlugin from 'generate-page-webpack-plugin'; + +import HtmlWebpackPlugin from 'html-webpack-plugin'; + import { includePaths, excludePaths, @@ -42,20 +44,24 @@ export default ({ configDir, quiet, babelOptions, entries }) => { publicPath: '', }, plugins: [ - new GeneratePagePlugin( - { - template: require.resolve('../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, - } + ...Object.keys(entries).map( + e => + new HtmlWebpackPlugin({ + filename: `${e === 'manager' ? 'index' : e}.html`, + excludeChunks: Object.keys(entries).filter(i => i !== e), + chunksSortMode: 'none', + alwaysWriteToDisk: true, + inject: false, + templateParameters: (compilation, files, options) => + console.log({ options, files }) || { + compilation, + files, + options, + version, + ...entriesMeta[e], + }, + template: require.resolve(`../templates/index.ejs`), + }) ), new webpack.DefinePlugin(loadEnv()), new webpack.HotModuleReplacementPlugin(), diff --git a/lib/core/src/server/templates/index.ejs b/lib/core/src/server/templates/index.ejs new file mode 100644 index 000000000000..cb0822c14f90 --- /dev/null +++ b/lib/core/src/server/templates/index.ejs @@ -0,0 +1,46 @@ + + + + + + <%= options.title || 'Storybook'%> + + <% if (files.favicon) { %> + + <% } %> + + <% if (options.mobile) { %> + + <% } %> + + <% if (typeof headHtmlSnippet !== 'undefined') { %> + <%= headHtmlSnippet %> + <% } %> + + <% files.css.forEach(file => { %> + + <% }); %> + + + + +<% if (typeof bodyHtmlSnippet !== 'undefined') { %> + <%= bodyHtmlSnippet %> +<% } %> + +
+ +<% if (options.window) { %> + +<% } %> + +<% files.js.forEach(file => { %> + +<% }); %> + + + diff --git a/lib/core/src/server/templates/index.html.ejs b/lib/core/src/server/templates/index.html.ejs deleted file mode 100644 index c775b7c72885..000000000000 --- a/lib/core/src/server/templates/index.html.ejs +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - Storybook - - - <% if (options.headHtmlSnippet) { %> - <%- options.headHtmlSnippet %> - <% } %> - - <% if (options.links) { %> - <% for (item of options.links) { %> - <% if (typeof item === 'string' || item instanceof String) { item = { href: item, rel: 'stylesheet' } } %> - <%= key %>="<%= item[key] %>"<% } %>> - <% } %> - <% } %> - - <% for (item of files) { %> - <% if (item.match(/.css$/)) { %> - - <% } %> - <% } %> - - - - - <% if (options.window) { %> - - <% } %> - - <% if (options.bodyHtmlSnippet) { %> - <%- options.bodyHtmlSnippet %> - <% } %> - -
- - <% if (options.scripts) { %> - <% for (item of options.scripts) { %> - <% if (typeof item === 'string' || item instanceof String) { item = { src: item } } %> - - <% } %> - <% } %> - - <% for (key in dlls) { %> - - <% } %> - - <% for (item of files) { %> - <% if (item.match(/.js$/)) { %> - - <% } %> - <% } %> - - - diff --git a/yarn.lock b/yarn.lock index 82f802e747b6..65b0ce8bdffd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1980,6 +1980,13 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" +"@ndelangen/html-webpack-harddisk-plugin@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@ndelangen/html-webpack-harddisk-plugin/-/html-webpack-harddisk-plugin-0.2.0.tgz#d2eb570597c83c1aa93d1f2fcb3d874a5855de07" + integrity sha512-55Mo2b5WtIT0l653y6ocu7C6QzznbasEnlixGzA26WK8Fj81wuEY3xf5N5bNAvDVfrwTLIPTXdEUGgPdrPLszw== + dependencies: + mkdirp "^0.5.1" + "@ngrx/store@^6.1.0": version "6.1.0" resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-6.1.0.tgz#5b027647a797bf027912568214b10375dd75af38" @@ -11348,7 +11355,7 @@ html-webpack-plugin@4.0.0-alpha.2: tapable "^1.0.0" util.promisify "1.0.0" -html-webpack-plugin@^3.0.6, html-webpack-plugin@^3.2.0: +html-webpack-plugin@^3.0.6: version "3.2.0" resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-3.2.0.tgz#b01abbd723acaaa7b37b6af4492ebda03d9dd37b" integrity sha1-sBq71yOsqqeze2r0SS69oD2d03s= @@ -11361,6 +11368,19 @@ html-webpack-plugin@^3.0.6, html-webpack-plugin@^3.2.0: toposort "^1.0.0" util.promisify "1.0.0" +html-webpack-plugin@^4.0.0-beta.1: + version "4.0.0-beta.1" + resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.1.tgz#15b3b3634af47c79ac46c185f64e2007e0b0d14c" + integrity sha512-O+stuSCY5rdzX5O1l1FdH1bZqRQ7ybTi12OHzgD8u5Ogu2Usu3K7e633vxj4uOjM49ST+qCcu5rWYhqNKlpomQ== + dependencies: + "@types/tapable" "1.0.2" + html-minifier "^3.2.3" + loader-utils "^1.1.0" + lodash "^4.17.10" + pretty-error "^2.0.2" + tapable "^1.0.0" + util.promisify "1.0.0" + htmlescape@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/htmlescape/-/htmlescape-1.1.1.tgz#3a03edc2214bca3b66424a3e7959349509cb0351" From d468572706861809ddf4d1a8193981508098ce15 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 12 Oct 2018 02:22:48 +0200 Subject: [PATCH 2/5] CLEANUP --- .../src/server/config/webpack.config.dev.js | 16 ++++----- .../src/server/config/webpack.config.prod.js | 34 +++++++++++-------- yarn.lock | 7 ---- 3 files changed, 26 insertions(+), 31 deletions(-) diff --git a/lib/core/src/server/config/webpack.config.dev.js b/lib/core/src/server/config/webpack.config.dev.js index 3edaa7649155..d70f33fd8e55 100644 --- a/lib/core/src/server/config/webpack.config.dev.js +++ b/lib/core/src/server/config/webpack.config.dev.js @@ -4,7 +4,6 @@ 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 { @@ -52,14 +51,13 @@ export default ({ configDir, quiet, babelOptions, entries }) => { chunksSortMode: 'none', alwaysWriteToDisk: true, inject: false, - templateParameters: (compilation, files, options) => - console.log({ options, files }) || { - compilation, - files, - options, - version, - ...entriesMeta[e], - }, + templateParameters: (compilation, files, options) => ({ + compilation, + files, + options, + version, + ...entriesMeta[e], + }), template: require.resolve(`../templates/index.ejs`), }) ), diff --git a/lib/core/src/server/config/webpack.config.prod.js b/lib/core/src/server/config/webpack.config.prod.js index f8676f12f034..a2bf9bd9419d 100644 --- a/lib/core/src/server/config/webpack.config.prod.js +++ b/lib/core/src/server/config/webpack.config.prod.js @@ -1,7 +1,8 @@ import webpack from 'webpack'; import { getEnvironment } from 'universal-dotenv'; import Dotenv from 'dotenv-webpack'; -import GeneratePagePlugin from 'generate-page-webpack-plugin'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; + import { version } from '../../../package.json'; import { includePaths, excludePaths, loadEnv, nodePaths, getBabelRuntimePath } from './utils'; import { getPreviewHeadHtml, getManagerHeadHtml, getPreviewBodyHtml } from '../utils'; @@ -32,20 +33,23 @@ export default ({ configDir, babelOptions, entries }) => { publicPath: '', }, plugins: [ - new GeneratePagePlugin( - { - template: require.resolve('../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, - } + ...Object.keys(entries).map( + e => + new HtmlWebpackPlugin({ + filename: `${e === 'manager' ? 'index' : e}.html`, + excludeChunks: Object.keys(entries).filter(i => i !== e), + chunksSortMode: 'none', + alwaysWriteToDisk: true, + inject: false, + templateParameters: (compilation, files, options) => ({ + compilation, + files, + options, + version, + ...entriesMeta[e], + }), + template: require.resolve(`../templates/index.ejs`), + }) ), new webpack.DefinePlugin(loadEnv({ production: true })), new webpack.DefinePlugin(getEnvironment().webpack), diff --git a/yarn.lock b/yarn.lock index 65b0ce8bdffd..e192536ff002 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1980,13 +1980,6 @@ call-me-maybe "^1.0.1" glob-to-regexp "^0.3.0" -"@ndelangen/html-webpack-harddisk-plugin@^0.2.0": - version "0.2.0" - resolved "https://registry.yarnpkg.com/@ndelangen/html-webpack-harddisk-plugin/-/html-webpack-harddisk-plugin-0.2.0.tgz#d2eb570597c83c1aa93d1f2fcb3d874a5855de07" - integrity sha512-55Mo2b5WtIT0l653y6ocu7C6QzznbasEnlixGzA26WK8Fj81wuEY3xf5N5bNAvDVfrwTLIPTXdEUGgPdrPLszw== - dependencies: - mkdirp "^0.5.1" - "@ngrx/store@^6.1.0": version "6.1.0" resolved "https://registry.yarnpkg.com/@ngrx/store/-/store-6.1.0.tgz#5b027647a797bf027912568214b10375dd75af38" From b15048aa8f07fe4eb75e9d34250c712383e7cfe9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 12 Oct 2018 02:57:21 +0200 Subject: [PATCH 3/5] FIX RN --- app/react-native/package.json | 2 +- .../src/server/config/webpack.config.js | 32 ++++++++--------- .../src/server/config/webpack.config.prod.js | 34 ++++++++++++------- 3 files changed, 37 insertions(+), 31 deletions(-) diff --git a/app/react-native/package.json b/app/react-native/package.json index c281601c4462..4b83c8ab4832 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -51,8 +51,8 @@ "ejs": "^2.6.1", "express": "^4.16.3", "find-cache-dir": "^2.0.0", - "generate-page-webpack-plugin": "^1.1.1", "global": "^4.3.2", + "html-webpack-plugin": "^4.0.0-beta.1", "json5": "^2.1.0", "prop-types": "^15.6.2", "raw-loader": "^0.5.1", diff --git a/app/react-native/src/server/config/webpack.config.js b/app/react-native/src/server/config/webpack.config.js index 18b52b0bfa8e..cb545a5caf5c 100644 --- a/app/react-native/src/server/config/webpack.config.js +++ b/app/react-native/src/server/config/webpack.config.js @@ -4,8 +4,7 @@ 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 GeneratePagePlugin from 'generate-page-webpack-plugin'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; import { getManagerHeadHtml } from '@storybook/core/server'; @@ -31,21 +30,20 @@ const getConfig = options => { 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 HtmlWebpackPlugin({ + filename: `index.html`, + chunksSortMode: 'none', + alwaysWriteToDisk: true, + inject: false, + templateParameters: (compilation, files, o) => ({ + compilation, + files, + options: o, + version, + ...entriesMeta.manager, + }), + template: require.resolve(`@storybook/core/dist/server/templates/index.html.ejs`), + }), new webpack.HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), new WatchMissingNodeModulesPlugin(nodeModulesPaths), diff --git a/app/react-native/src/server/config/webpack.config.prod.js b/app/react-native/src/server/config/webpack.config.prod.js index 6393a47dc77b..e13fde963427 100644 --- a/app/react-native/src/server/config/webpack.config.prod.js +++ b/app/react-native/src/server/config/webpack.config.prod.js @@ -2,13 +2,19 @@ import path from 'path'; import webpack from 'webpack'; import { getEnvironment } from 'universal-dotenv'; import Dotenv from 'dotenv-webpack'; -import GeneratePagePlugin from 'generate-page-webpack-plugin'; +import HtmlWebpackPlugin from 'html-webpack-plugin'; import { getManagerHeadHtml } from '@storybook/core/dist/server/utils'; import { version } from '../../../package.json'; import { includePaths, excludePaths } from './utils'; const getConfig = options => { + const entriesMeta = { + manager: { + headHtmlSnippet: getManagerHeadHtml(options.configDir, process.env), + }, + }; + const config = { mode: 'production', bail: true, @@ -27,18 +33,20 @@ const getConfig = options => { 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: getManagerHeadHtml(options.configDir, process.env), - } - ), + new HtmlWebpackPlugin({ + filename: `index.html`, + chunksSortMode: 'none', + alwaysWriteToDisk: true, + inject: false, + templateParameters: (compilation, files, o) => ({ + compilation, + files, + options: o, + version, + ...entriesMeta.manager, + }), + template: require.resolve(`@storybook/core/dist/server/templates/index.html.ejs`), + }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"', storybookOptions: JSON.stringify(options), From 5cd8e564b32abe7f4778d2ec4df4fa26c1ca5e38 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 12 Oct 2018 07:44:59 +0200 Subject: [PATCH 4/5] CLEANUP --- yarn.lock | 5 ----- 1 file changed, 5 deletions(-) diff --git a/yarn.lock b/yarn.lock index e192536ff002..4cf52a4eed75 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10451,11 +10451,6 @@ gaze@^1.0.0: dependencies: globule "^1.0.0" -generate-page-webpack-plugin@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/generate-page-webpack-plugin/-/generate-page-webpack-plugin-1.1.1.tgz#82208fb599f45d70940cbd6327a7a46e77c5ee2c" - integrity sha512-b782eo6JiJ06jYn4mcOtR/wkACN6eGRwAElM5djb/JCgbGbSzrPsnPTlX2Aa91sXe5pNszAQP6MRE1fVSGIz4g== - genfun@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/genfun/-/genfun-4.0.1.tgz#ed10041f2e4a7f1b0a38466d17a5c3e27df1dfc1" From 9f180d45a1d2b75e6d1ae67f7bb9746a87b5e5ae Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 12 Oct 2018 07:59:48 +0200 Subject: [PATCH 5/5] FIX RN template refs --- app/react-native/src/server/config/webpack.config.js | 2 +- app/react-native/src/server/config/webpack.config.prod.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/react-native/src/server/config/webpack.config.js b/app/react-native/src/server/config/webpack.config.js index cb545a5caf5c..ec9c6ee8dc40 100644 --- a/app/react-native/src/server/config/webpack.config.js +++ b/app/react-native/src/server/config/webpack.config.js @@ -42,7 +42,7 @@ const getConfig = options => { version, ...entriesMeta.manager, }), - template: require.resolve(`@storybook/core/dist/server/templates/index.html.ejs`), + template: require.resolve(`@storybook/core/src/server/templates/index.ejs`), }), new webpack.HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), diff --git a/app/react-native/src/server/config/webpack.config.prod.js b/app/react-native/src/server/config/webpack.config.prod.js index e13fde963427..6c6db323bde6 100644 --- a/app/react-native/src/server/config/webpack.config.prod.js +++ b/app/react-native/src/server/config/webpack.config.prod.js @@ -45,7 +45,7 @@ const getConfig = options => { version, ...entriesMeta.manager, }), - template: require.resolve(`@storybook/core/dist/server/templates/index.html.ejs`), + template: require.resolve(`@storybook/core/src/server/templates/index.ejs`), }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"',