From da9f268faa6ba8b069f3647097b6722732bf910d Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 28 Feb 2018 13:06:50 -0500 Subject: [PATCH 01/12] chore: Refactor JS bundle factory code into scripts/webpack/ --- scripts/webpack/js-bundle-factory.js | 167 ++++++++++++++++++ scripts/webpack/plugin-factory.js | 2 +- .../goldens/build-config-dev-env.golden.json | 5 +- .../goldens/build-config-no-env.golden.json | 99 +++-------- .../goldens/build-config-prod-env.golden.json | 99 +++-------- webpack.config.js | 112 ++---------- 6 files changed, 246 insertions(+), 238 deletions(-) create mode 100644 scripts/webpack/js-bundle-factory.js diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js new file mode 100644 index 00000000000..3186b19685f --- /dev/null +++ b/scripts/webpack/js-bundle-factory.js @@ -0,0 +1,167 @@ +/** + * Copyright 2016 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +class JsBundleFactory { + constructor({ + env, + pathResolver, + globber, + pluginFactory, + } = {}) { + /** @type {!Environment} */ + this.env_ = env; + + /** @type {!PathResolver} */ + this.pathResolver_ = pathResolver; + + /** @type {!Globber} */ + this.globber_ = globber; + + /** @type {!PluginFactory} */ + this.pluginFactory_ = pluginFactory; + } + + createCustomJs( + { + bundleName, + chunks, + chunkGlobConfig: { + inputDirectory = null, + filePathPattern = null, + } = {}, + output: { + fsDirAbsolutePath, + httpDirAbsolutePath, + filenamePattern = this.env_.isProd() ? '[name].min.js' : '[name].js', + library, + }, + plugins = [], + }) { + chunks = chunks || this.globber_.getChunks({inputDirectory, filePathPattern}); + + return { + name: bundleName, + entry: chunks, + output: { + path: fsDirAbsolutePath, + publicPath: httpDirAbsolutePath, + filename: filenamePattern, + libraryTarget: 'umd', + library, + }, + // See https://github.com/webpack/webpack-dev-server/issues/882 + // Because we only spin up dev servers temporarily, and all of our assets are publicly + // available on GitHub, we can safely disable this check. + devServer: { + disableHostCheck: true, + }, + devtool: 'source-map', + module: { + rules: [{ + test: /\.js$/, + exclude: /node_modules/, + loader: 'babel-loader', + options: { + cacheDirectory: true, + }, + }], + }, + plugins: [ + ...plugins, + ], + }; + } + + createMainJsCombined( + { + output: { + fsDirAbsolutePath, + httpDirAbsolutePath, + }, + plugins = [], + }) { + const getAbsolutePath = (...args) => this.pathResolver_.getAbsolutePath(...args); + + return this.createCustomJs({ + bundleName: 'main-js-combined', + chunks: getAbsolutePath('/packages/material-components-web/index.js'), + output: { + fsDirAbsolutePath, + httpDirAbsolutePath, + filenamePattern: this.env_.isProd() ? 'material-components-web.min.js' : 'material-components-web.js', + library: 'mdc', + }, + plugins: [ + this.pluginFactory_.createCopyrightBannerPlugin(), + ...plugins, + ], + }); + } + + createMainJsALaCarte( + { + output: { + fsDirAbsolutePath, + httpDirAbsolutePath, + }, + plugins = [], + }) { + const getAbsolutePath = (...args) => this.pathResolver_.getAbsolutePath(...args); + + return this.createCustomJs({ + bundleName: 'main-js-a-la-carte', + chunks: { + animation: getAbsolutePath('./packages/mdc-animation/index.js'), + autoInit: getAbsolutePath('./packages/mdc-auto-init/index.js'), + base: getAbsolutePath('./packages/mdc-base/index.js'), + checkbox: getAbsolutePath('./packages/mdc-checkbox/index.js'), + chips: getAbsolutePath('./packages/mdc-chips/index.js'), + dialog: getAbsolutePath('./packages/mdc-dialog/index.js'), + drawer: getAbsolutePath('./packages/mdc-drawer/index.js'), + formField: getAbsolutePath('./packages/mdc-form-field/index.js'), + gridList: getAbsolutePath('./packages/mdc-grid-list/index.js'), + iconToggle: getAbsolutePath('./packages/mdc-icon-toggle/index.js'), + lineRipple: getAbsolutePath('./packages/mdc-line-ripple/index.js'), + linearProgress: getAbsolutePath('./packages/mdc-linear-progress/index.js'), + menu: getAbsolutePath('./packages/mdc-menu/index.js'), + radio: getAbsolutePath('./packages/mdc-radio/index.js'), + ripple: getAbsolutePath('./packages/mdc-ripple/index.js'), + select: getAbsolutePath('./packages/mdc-select/index.js'), + selectionControl: getAbsolutePath('./packages/mdc-selection-control/index.js'), + slider: getAbsolutePath('./packages/mdc-slider/index.js'), + snackbar: getAbsolutePath('./packages/mdc-snackbar/index.js'), + tabs: getAbsolutePath('./packages/mdc-tabs/index.js'), + textfield: getAbsolutePath('./packages/mdc-textfield/index.js'), + toolbar: getAbsolutePath('./packages/mdc-toolbar/index.js'), + topAppBar: getAbsolutePath('./packages/mdc-top-app-bar/index.js'), + }, + output: { + fsDirAbsolutePath, + httpDirAbsolutePath, + filenamePattern: this.env_.isProd() ? 'mdc.[name].min.js' : 'mdc.[name].js', + library: ['mdc', '[name]'], + }, + plugins: [ + this.pluginFactory_.createCopyrightBannerPlugin(), + ...plugins, + ], + }); + } +} + +module.exports = JsBundleFactory; diff --git a/scripts/webpack/plugin-factory.js b/scripts/webpack/plugin-factory.js index 427d455e115..c6548dad6a3 100644 --- a/scripts/webpack/plugin-factory.js +++ b/scripts/webpack/plugin-factory.js @@ -21,7 +21,7 @@ 'use strict'; const CopyrightBannerPlugin = require('./copyright-banner-plugin'); -const CssCleanupPlugin = require('../../scripts/webpack/css-cleanup-plugin'); +const CssCleanupPlugin = require('./css-cleanup-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = class { diff --git a/test/build/goldens/build-config-dev-env.golden.json b/test/build/goldens/build-config-dev-env.golden.json index 00bcb3d3ce6..d5f1ccc9830 100644 --- a/test/build/goldens/build-config-dev-env.golden.json +++ b/test/build/goldens/build-config-dev-env.golden.json @@ -1,6 +1,6 @@ [ { - "name": "js-all", + "name": "main-js-combined", "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", @@ -155,6 +155,9 @@ "[name]" ] }, + "devServer": { + "disableHostCheck": true + }, "devtool": "source-map", "module": { "rules": [ diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json index b9319a6d7ee..ade6ee6f845 100644 --- a/test/build/goldens/build-config-no-env.golden.json +++ b/test/build/goldens/build-config-no-env.golden.json @@ -1,6 +1,6 @@ [ { - "name": "js-all", + "name": "main-js-combined", "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", @@ -37,77 +37,31 @@ ] }, { - "name": "js-components", + "name": "main-js-a-la-carte", "entry": { - "animation": [ - "/packages/mdc-animation/index.js" - ], - "autoInit": [ - "/packages/mdc-auto-init/index.js" - ], - "base": [ - "/packages/mdc-base/index.js" - ], - "checkbox": [ - "/packages/mdc-checkbox/index.js" - ], - "chips": [ - "/packages/mdc-chips/index.js" - ], - "dialog": [ - "/packages/mdc-dialog/index.js" - ], - "drawer": [ - "/packages/mdc-drawer/index.js" - ], - "formField": [ - "/packages/mdc-form-field/index.js" - ], - "gridList": [ - "/packages/mdc-grid-list/index.js" - ], - "iconToggle": [ - "/packages/mdc-icon-toggle/index.js" - ], - "lineRipple": [ - "/packages/mdc-line-ripple/index.js" - ], - "linearProgress": [ - "/packages/mdc-linear-progress/index.js" - ], - "menu": [ - "/packages/mdc-menu/index.js" - ], - "radio": [ - "/packages/mdc-radio/index.js" - ], - "ripple": [ - "/packages/mdc-ripple/index.js" - ], - "select": [ - "/packages/mdc-select/index.js" - ], - "selectionControl": [ - "/packages/mdc-selection-control/index.js" - ], - "slider": [ - "/packages/mdc-slider/index.js" - ], - "snackbar": [ - "/packages/mdc-snackbar/index.js" - ], - "tabs": [ - "/packages/mdc-tabs/index.js" - ], - "textfield": [ - "/packages/mdc-textfield/index.js" - ], - "toolbar": [ - "/packages/mdc-toolbar/index.js" - ], - "topAppBar": [ - "/packages/mdc-top-app-bar/index.js" - ] + "animation": "/packages/mdc-animation/index.js", + "autoInit": "/packages/mdc-auto-init/index.js", + "base": "/packages/mdc-base/index.js", + "checkbox": "/packages/mdc-checkbox/index.js", + "chips": "/packages/mdc-chips/index.js", + "dialog": "/packages/mdc-dialog/index.js", + "drawer": "/packages/mdc-drawer/index.js", + "formField": "/packages/mdc-form-field/index.js", + "gridList": "/packages/mdc-grid-list/index.js", + "iconToggle": "/packages/mdc-icon-toggle/index.js", + "lineRipple": "/packages/mdc-line-ripple/index.js", + "linearProgress": "/packages/mdc-linear-progress/index.js", + "menu": "/packages/mdc-menu/index.js", + "radio": "/packages/mdc-radio/index.js", + "ripple": "/packages/mdc-ripple/index.js", + "select": "/packages/mdc-select/index.js", + "selectionControl": "/packages/mdc-selection-control/index.js", + "slider": "/packages/mdc-slider/index.js", + "snackbar": "/packages/mdc-snackbar/index.js", + "tabs": "/packages/mdc-tabs/index.js", + "textfield": "/packages/mdc-textfield/index.js", + "toolbar": "/packages/mdc-toolbar/index.js", + "topAppBar": "/packages/mdc-top-app-bar/index.js" }, "output": { "path": "/build", @@ -119,6 +73,9 @@ "[name]" ] }, + "devServer": { + "disableHostCheck": true + }, "devtool": "source-map", "module": { "rules": [ diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json index ac44adde83b..2a370b612d7 100644 --- a/test/build/goldens/build-config-prod-env.golden.json +++ b/test/build/goldens/build-config-prod-env.golden.json @@ -1,6 +1,6 @@ [ { - "name": "js-all", + "name": "main-js-combined", "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", @@ -37,77 +37,31 @@ ] }, { - "name": "js-components", + "name": "main-js-a-la-carte", "entry": { - "animation": [ - "/packages/mdc-animation/index.js" - ], - "autoInit": [ - "/packages/mdc-auto-init/index.js" - ], - "base": [ - "/packages/mdc-base/index.js" - ], - "checkbox": [ - "/packages/mdc-checkbox/index.js" - ], - "chips": [ - "/packages/mdc-chips/index.js" - ], - "dialog": [ - "/packages/mdc-dialog/index.js" - ], - "drawer": [ - "/packages/mdc-drawer/index.js" - ], - "formField": [ - "/packages/mdc-form-field/index.js" - ], - "gridList": [ - "/packages/mdc-grid-list/index.js" - ], - "iconToggle": [ - "/packages/mdc-icon-toggle/index.js" - ], - "lineRipple": [ - "/packages/mdc-line-ripple/index.js" - ], - "linearProgress": [ - "/packages/mdc-linear-progress/index.js" - ], - "menu": [ - "/packages/mdc-menu/index.js" - ], - "radio": [ - "/packages/mdc-radio/index.js" - ], - "ripple": [ - "/packages/mdc-ripple/index.js" - ], - "select": [ - "/packages/mdc-select/index.js" - ], - "selectionControl": [ - "/packages/mdc-selection-control/index.js" - ], - "slider": [ - "/packages/mdc-slider/index.js" - ], - "snackbar": [ - "/packages/mdc-snackbar/index.js" - ], - "tabs": [ - "/packages/mdc-tabs/index.js" - ], - "textfield": [ - "/packages/mdc-textfield/index.js" - ], - "toolbar": [ - "/packages/mdc-toolbar/index.js" - ], - "topAppBar": [ - "/packages/mdc-top-app-bar/index.js" - ] + "animation": "/packages/mdc-animation/index.js", + "autoInit": "/packages/mdc-auto-init/index.js", + "base": "/packages/mdc-base/index.js", + "checkbox": "/packages/mdc-checkbox/index.js", + "chips": "/packages/mdc-chips/index.js", + "dialog": "/packages/mdc-dialog/index.js", + "drawer": "/packages/mdc-drawer/index.js", + "formField": "/packages/mdc-form-field/index.js", + "gridList": "/packages/mdc-grid-list/index.js", + "iconToggle": "/packages/mdc-icon-toggle/index.js", + "lineRipple": "/packages/mdc-line-ripple/index.js", + "linearProgress": "/packages/mdc-linear-progress/index.js", + "menu": "/packages/mdc-menu/index.js", + "radio": "/packages/mdc-radio/index.js", + "ripple": "/packages/mdc-ripple/index.js", + "select": "/packages/mdc-select/index.js", + "selectionControl": "/packages/mdc-selection-control/index.js", + "slider": "/packages/mdc-slider/index.js", + "snackbar": "/packages/mdc-snackbar/index.js", + "tabs": "/packages/mdc-tabs/index.js", + "textfield": "/packages/mdc-textfield/index.js", + "toolbar": "/packages/mdc-toolbar/index.js", + "topAppBar": "/packages/mdc-top-app-bar/index.js" }, "output": { "path": "/build", @@ -119,6 +73,9 @@ "[name]" ] }, + "devServer": { + "disableHostCheck": true + }, "devtool": "source-map", "module": { "rules": [ diff --git a/webpack.config.js b/webpack.config.js index db081b6951f..38e6e8049c2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -21,6 +21,7 @@ const path = require('path'); const CssBundleFactory = require('./scripts/webpack/css-bundle-factory'); const Environment = require('./scripts/build/environment'); const Globber = require('./scripts/webpack/globber'); +const JsBundleFactory = require('./scripts/webpack/js-bundle-factory'); const PathResolver = require('./scripts/build/path-resolver'); const PluginFactory = require('./scripts/webpack/plugin-factory'); @@ -31,94 +32,29 @@ const pathResolver = new PathResolver(); const globber = new Globber({pathResolver}); const pluginFactory = new PluginFactory({globber}); const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); +const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); const OUT_DIR_ABS = path.resolve('./build'); const DEMO_ASSET_DIR_REL = '/assets/'; // Used by webpack-dev-server const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); -module.exports = [{ - name: 'js-all', - entry: path.resolve('./packages/material-components-web/index.js'), +module.exports = []; + +module.exports.push(jsBundleFactory.createMainJsCombined({ output: { - path: OUT_DIR_ABS, - publicPath: DEMO_ASSET_DIR_REL, - filename: 'material-components-web.' + (env.isProd() ? 'min.' : '') + 'js', - libraryTarget: 'umd', - library: 'mdc', - }, - // See https://github.com/webpack/webpack-dev-server/issues/882 - // Because we only spin up dev servers temporarily, and all of our assets are publicly - // available on GitHub, we can safely disable this check. - devServer: { - disableHostCheck: true, + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, }, - devtool: 'source-map', - module: { - rules: [{ - test: /\.js$/, - exclude: /node_modules/, - loader: 'babel-loader', - options: { - cacheDirectory: true, - }, - }], - }, - plugins: [ - copyrightBannerPlugin, - ], -}]; +})); if (!env.isDev()) { - module.exports.push({ - name: 'js-components', - entry: { - animation: [path.resolve('./packages/mdc-animation/index.js')], - autoInit: [path.resolve('./packages/mdc-auto-init/index.js')], - base: [path.resolve('./packages/mdc-base/index.js')], - checkbox: [path.resolve('./packages/mdc-checkbox/index.js')], - chips: [path.resolve('./packages/mdc-chips/index.js')], - dialog: [path.resolve('./packages/mdc-dialog/index.js')], - drawer: [path.resolve('./packages/mdc-drawer/index.js')], - formField: [path.resolve('./packages/mdc-form-field/index.js')], - gridList: [path.resolve('./packages/mdc-grid-list/index.js')], - iconToggle: [path.resolve('./packages/mdc-icon-toggle/index.js')], - lineRipple: [path.resolve('./packages/mdc-line-ripple/index.js')], - linearProgress: [path.resolve('./packages/mdc-linear-progress/index.js')], - menu: [path.resolve('./packages/mdc-menu/index.js')], - radio: [path.resolve('./packages/mdc-radio/index.js')], - ripple: [path.resolve('./packages/mdc-ripple/index.js')], - select: [path.resolve('./packages/mdc-select/index.js')], - selectionControl: [path.resolve('./packages/mdc-selection-control/index.js')], - slider: [path.resolve('./packages/mdc-slider/index.js')], - snackbar: [path.resolve('./packages/mdc-snackbar/index.js')], - tabs: [path.resolve('./packages/mdc-tabs/index.js')], - textfield: [path.resolve('./packages/mdc-textfield/index.js')], - toolbar: [path.resolve('./packages/mdc-toolbar/index.js')], - topAppBar: [path.resolve('./packages/mdc-top-app-bar/index.js')], - }, + module.exports.push(jsBundleFactory.createMainJsALaCarte({ output: { - path: OUT_DIR_ABS, - publicPath: DEMO_ASSET_DIR_REL, - filename: 'mdc.[name].' + (env.isProd() ? 'min.' : '') + 'js', - libraryTarget: 'umd', - library: ['mdc', '[name]'], - }, - devtool: 'source-map', - module: { - rules: [{ - test: /\.js$/, - exclude: /node_modules/, - loader: 'babel-loader', - options: { - cacheDirectory: true, - }, - }], + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, }, - plugins: [ - copyrightBannerPlugin, - ], - }); + })); module.exports.push(cssBundleFactory.createMainCssCombined({ output: { @@ -150,32 +86,20 @@ if (env.isDev()) { ], })); - module.exports.push({ - name: 'demo-js', - entry: { + module.exports.push(jsBundleFactory.createCustomJs({ + bundleName: 'demo-js', + chunks: { 'common': [path.resolve('./demos/common.js')], 'theme/index': [path.resolve('./demos/theme/index.js')], }, output: { - path: OUT_DIR_ABS, - publicPath: DEMO_ASSET_DIR_REL, + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, filename: '[name].js', - libraryTarget: 'umd', library: ['demo', '[name]'], }, - devtool: 'source-map', - module: { - rules: [{ - test: /\.js$/, - exclude: /node_modules/, - loader: 'babel-loader', - options: { - cacheDirectory: true, - }, - }], - }, plugins: [ copyrightBannerPlugin, ], - }); + })); } From 2e07c8d76d2e541438b05eff7b4579de37935ffb Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 28 Feb 2018 13:17:53 -0500 Subject: [PATCH 02/12] WIP: Add @fileoverview to js-bundle-factory.js --- scripts/webpack/js-bundle-factory.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js index 3186b19685f..48bbad5ca9f 100644 --- a/scripts/webpack/js-bundle-factory.js +++ b/scripts/webpack/js-bundle-factory.js @@ -14,6 +14,10 @@ * limitations under the License. */ +/** + * @fileoverview Creates Webpack bundle config objects to compile ES2015 JavaScript to ES5. + */ + 'use strict'; class JsBundleFactory { From f661068032995d2988cd1e1a6ab84940fab2810c Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 28 Feb 2018 13:22:47 -0500 Subject: [PATCH 03/12] WIP: Remove unnecessary array --- test/build/goldens/build-config-dev-env.golden.json | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/test/build/goldens/build-config-dev-env.golden.json b/test/build/goldens/build-config-dev-env.golden.json index d5f1ccc9830..6948dbbfacc 100644 --- a/test/build/goldens/build-config-dev-env.golden.json +++ b/test/build/goldens/build-config-dev-env.golden.json @@ -138,12 +138,8 @@ { "name": "demo-js", "entry": { - "common": [ - "/demos/common.js" - ], - "theme/index": [ - "/demos/theme/index.js" - ] + "common": "/demos/common.js", + "theme/index": "/demos/theme/index.js" }, "output": { "path": "/build", From f8d62ba47a5e049b2ba49c7b29f60f5bb73ed9a8 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 28 Feb 2018 13:23:14 -0500 Subject: [PATCH 04/12] WIP: Use PathResolver for consistency --- webpack.config.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 38e6e8049c2..97e253ac3ca 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -16,8 +16,6 @@ 'use strict'; -const path = require('path'); - const CssBundleFactory = require('./scripts/webpack/css-bundle-factory'); const Environment = require('./scripts/build/environment'); const Globber = require('./scripts/webpack/globber'); @@ -34,7 +32,7 @@ const pluginFactory = new PluginFactory({globber}); const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); -const OUT_DIR_ABS = path.resolve('./build'); +const OUT_DIR_ABS = pathResolver.getAbsolutePath('./build'); const DEMO_ASSET_DIR_REL = '/assets/'; // Used by webpack-dev-server const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); @@ -89,8 +87,8 @@ if (env.isDev()) { module.exports.push(jsBundleFactory.createCustomJs({ bundleName: 'demo-js', chunks: { - 'common': [path.resolve('./demos/common.js')], - 'theme/index': [path.resolve('./demos/theme/index.js')], + 'common': pathResolver.getAbsolutePath('./demos/common.js'), + 'theme/index': pathResolver.getAbsolutePath('./demos/theme/index.js'), }, output: { fsDirAbsolutePath: OUT_DIR_ABS, From 90c7ebf28311b48afefc5a20407da09764df8b12 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 28 Feb 2018 13:25:32 -0500 Subject: [PATCH 05/12] WIP: Use consistent absolute path style --- scripts/webpack/js-bundle-factory.js | 46 ++++++++++++++-------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js index 48bbad5ca9f..262b48e039a 100644 --- a/scripts/webpack/js-bundle-factory.js +++ b/scripts/webpack/js-bundle-factory.js @@ -130,29 +130,29 @@ class JsBundleFactory { return this.createCustomJs({ bundleName: 'main-js-a-la-carte', chunks: { - animation: getAbsolutePath('./packages/mdc-animation/index.js'), - autoInit: getAbsolutePath('./packages/mdc-auto-init/index.js'), - base: getAbsolutePath('./packages/mdc-base/index.js'), - checkbox: getAbsolutePath('./packages/mdc-checkbox/index.js'), - chips: getAbsolutePath('./packages/mdc-chips/index.js'), - dialog: getAbsolutePath('./packages/mdc-dialog/index.js'), - drawer: getAbsolutePath('./packages/mdc-drawer/index.js'), - formField: getAbsolutePath('./packages/mdc-form-field/index.js'), - gridList: getAbsolutePath('./packages/mdc-grid-list/index.js'), - iconToggle: getAbsolutePath('./packages/mdc-icon-toggle/index.js'), - lineRipple: getAbsolutePath('./packages/mdc-line-ripple/index.js'), - linearProgress: getAbsolutePath('./packages/mdc-linear-progress/index.js'), - menu: getAbsolutePath('./packages/mdc-menu/index.js'), - radio: getAbsolutePath('./packages/mdc-radio/index.js'), - ripple: getAbsolutePath('./packages/mdc-ripple/index.js'), - select: getAbsolutePath('./packages/mdc-select/index.js'), - selectionControl: getAbsolutePath('./packages/mdc-selection-control/index.js'), - slider: getAbsolutePath('./packages/mdc-slider/index.js'), - snackbar: getAbsolutePath('./packages/mdc-snackbar/index.js'), - tabs: getAbsolutePath('./packages/mdc-tabs/index.js'), - textfield: getAbsolutePath('./packages/mdc-textfield/index.js'), - toolbar: getAbsolutePath('./packages/mdc-toolbar/index.js'), - topAppBar: getAbsolutePath('./packages/mdc-top-app-bar/index.js'), + animation: getAbsolutePath('/packages/mdc-animation/index.js'), + autoInit: getAbsolutePath('/packages/mdc-auto-init/index.js'), + base: getAbsolutePath('/packages/mdc-base/index.js'), + checkbox: getAbsolutePath('/packages/mdc-checkbox/index.js'), + chips: getAbsolutePath('/packages/mdc-chips/index.js'), + dialog: getAbsolutePath('/packages/mdc-dialog/index.js'), + drawer: getAbsolutePath('/packages/mdc-drawer/index.js'), + formField: getAbsolutePath('/packages/mdc-form-field/index.js'), + gridList: getAbsolutePath('/packages/mdc-grid-list/index.js'), + iconToggle: getAbsolutePath('/packages/mdc-icon-toggle/index.js'), + lineRipple: getAbsolutePath('/packages/mdc-line-ripple/index.js'), + linearProgress: getAbsolutePath('/packages/mdc-linear-progress/index.js'), + menu: getAbsolutePath('/packages/mdc-menu/index.js'), + radio: getAbsolutePath('/packages/mdc-radio/index.js'), + ripple: getAbsolutePath('/packages/mdc-ripple/index.js'), + select: getAbsolutePath('/packages/mdc-select/index.js'), + selectionControl: getAbsolutePath('/packages/mdc-selection-control/index.js'), + slider: getAbsolutePath('/packages/mdc-slider/index.js'), + snackbar: getAbsolutePath('/packages/mdc-snackbar/index.js'), + tabs: getAbsolutePath('/packages/mdc-tabs/index.js'), + textfield: getAbsolutePath('/packages/mdc-textfield/index.js'), + toolbar: getAbsolutePath('/packages/mdc-toolbar/index.js'), + topAppBar: getAbsolutePath('/packages/mdc-top-app-bar/index.js'), }, output: { fsDirAbsolutePath, From e54c250b2b3759a86de7b174450d67335f40642c Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 28 Feb 2018 16:03:26 -0500 Subject: [PATCH 06/12] chore: Extract webpack.demo.js from webpack.config.js Fixes #1994 --- demos/webpack.demo.js | 78 ++++++++++++++++++ package.json | 6 +- scripts/check-pkg-for-release.js | 2 +- scripts/webpack/css-bundle-factory.js | 17 ++-- .../goldens/build-config-dev-env.golden.json | 6 -- .../goldens/build-config-no-env.golden.json | 4 - .../goldens/build-config-prod-env.golden.json | 4 - test/build/webpack-module-exports.test.js | 2 +- webpack.config.js | 79 +++---------------- 9 files changed, 105 insertions(+), 93 deletions(-) create mode 100644 demos/webpack.demo.js diff --git a/demos/webpack.demo.js b/demos/webpack.demo.js new file mode 100644 index 00000000000..c6e07663611 --- /dev/null +++ b/demos/webpack.demo.js @@ -0,0 +1,78 @@ +/** + * Copyright 2016 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +const CssBundleFactory = require('../scripts/webpack/css-bundle-factory'); +const Environment = require('../scripts/build/environment'); +const Globber = require('../scripts/webpack/globber'); +const JsBundleFactory = require('../scripts/webpack/js-bundle-factory'); +const PathResolver = require('../scripts/build/path-resolver'); +const PluginFactory = require('../scripts/webpack/plugin-factory'); + +const env = new Environment(); +env.setBabelEnv(); + +const pathResolver = new PathResolver(); +const globber = new Globber({pathResolver}); +const pluginFactory = new PluginFactory({globber}); +const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); +const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); +const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); + +const OUTPUT = { + httpDirAbsolutePath: '/assets/', +}; + +module.exports = [ + createMainJsCombined(), + createDemoCss(), + createDemoJs(), +]; + +function createMainJsCombined() { + return jsBundleFactory.createMainJsCombined({output: OUTPUT}); +} + +function createDemoJs() { + return jsBundleFactory.createCustomJs({ + bundleName: 'demo-js', + chunks: { + 'common': pathResolver.getAbsolutePath('./demos/common.js'), + 'theme/index': pathResolver.getAbsolutePath('./demos/theme/index.js'), + }, + output: Object.assign({}, OUTPUT, { + filename: '[name].js', + library: ['demo', '[name]'], + }), + plugins: [ + copyrightBannerPlugin, + ], + }); +} + +function createDemoCss() { + return cssBundleFactory.createCustomCss({ + bundleName: 'demo-css', + chunkGlobConfig: { + inputDirectory: '/demos', + }, + output: OUTPUT, + plugins: [ + copyrightBannerPlugin, + ], + }); +} diff --git a/package.json b/package.json index 073cf0c8713..07ae6792e6a 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,11 @@ "clean": "del-cli build/** build .closure-tmp/** .closure-tmp", "commitmsg": "validate-commit-msg", "dist": "npm run build && npm run build:min", - "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0", - "fix:js": "eslint --fix packages test webpack.config.js karma.conf.js", + "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0 --config=demos/webpack.demo.js", + "fix:js": "eslint --fix packages test webpack.config.js demos/webpack.demo.js karma.conf.js", "fix:css": "stylelint --fix packages/**/*.scss", "fix": "npm-run-all --parallel fix:*", - "lint:js": "eslint packages test scripts webpack.config.js karma.conf.js", + "lint:js": "eslint packages test scripts webpack.config.js demos/webpack.demo.js karma.conf.js", "lint:css": "stylelint packages/**/*.scss", "lint": "npm-run-all --parallel lint:*", "postinstall": "lerna bootstrap", diff --git a/scripts/check-pkg-for-release.js b/scripts/check-pkg-for-release.js index 291eba4820f..d50ec961d68 100644 --- a/scripts/check-pkg-for-release.js +++ b/scripts/check-pkg-for-release.js @@ -88,7 +88,7 @@ function checkDependencyAddedInWebpackConfig() { function checkJSDependencyAddedInWebpackConfig() { const jsconfig = WEBPACK_CONFIG.find((value) => { - return value.name === 'js-components'; + return value.name === 'main-js-a-la-carte'; }); const nameCamel = camelCase(pkg.name.replace('@material/', '')); assert.notEqual(typeof jsconfig.entry[nameCamel], 'undefined', diff --git a/scripts/webpack/css-bundle-factory.js b/scripts/webpack/css-bundle-factory.js index 693a6c89be7..b7912d77414 100644 --- a/scripts/webpack/css-bundle-factory.js +++ b/scripts/webpack/css-bundle-factory.js @@ -55,13 +55,22 @@ module.exports = class { filePathPattern = '**/*.scss', } = {}, output: { - fsDirAbsolutePath, - httpDirAbsolutePath, + fsDirAbsolutePath = undefined, // Required if you're building npm dist and writing output files to disk + httpDirAbsolutePath = undefined, // Required if you're running the demo server filenamePattern = this.env_.isProd() ? '[name].min.css' : '[name].css', }, plugins = [], }) { chunks = chunks || this.globber_.getChunks({inputDirectory, filePathPattern}); + + const fsCleanupPlugins = []; + + if (fsDirAbsolutePath) { + fsCleanupPlugins.push(this.pluginFactory_.createCssCleanupPlugin({ + cleanupDirRelativePath: fsDirAbsolutePath, + })); + } + const cssExtractorPlugin = this.pluginFactory_.createCssExtractorPlugin(filenamePattern); return { @@ -81,9 +90,7 @@ module.exports = class { }, plugins: [ cssExtractorPlugin, - this.pluginFactory_.createCssCleanupPlugin({ - cleanupDirRelativePath: fsDirAbsolutePath, - }), + ...fsCleanupPlugins, ...plugins, ], }; diff --git a/test/build/goldens/build-config-dev-env.golden.json b/test/build/goldens/build-config-dev-env.golden.json index 6948dbbfacc..a323997c6b8 100644 --- a/test/build/goldens/build-config-dev-env.golden.json +++ b/test/build/goldens/build-config-dev-env.golden.json @@ -3,7 +3,6 @@ "name": "main-js-combined", "entry": "/packages/material-components-web/index.js", "output": { - "path": "/build", "publicPath": "/assets/", "filename": "material-components-web.js", "libraryTarget": "umd", @@ -73,7 +72,6 @@ "typography": "/demos/typography.scss" }, "output": { - "path": "/build", "publicPath": "/assets/", "filename": "[name].css.js" }, @@ -122,9 +120,6 @@ "id": 5, "options": {} }, - { - "cleanupDirRelativePath": "/build" - }, { "options": { "banner": "/*!\n Material Components for the Web\n Copyright (c) 2018 Google Inc.\n License: Apache-2.0\n*/", @@ -142,7 +137,6 @@ "theme/index": "/demos/theme/index.js" }, "output": { - "path": "/build", "publicPath": "/assets/", "filename": "[name].js", "libraryTarget": "umd", diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json index ade6ee6f845..6914c59f923 100644 --- a/test/build/goldens/build-config-no-env.golden.json +++ b/test/build/goldens/build-config-no-env.golden.json @@ -4,7 +4,6 @@ "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", - "publicPath": "/assets/", "filename": "material-components-web.js", "libraryTarget": "umd", "library": "mdc" @@ -65,7 +64,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "mdc.[name].js", "libraryTarget": "umd", "library": [ @@ -107,7 +105,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].css.js" }, "devtool": "source-map", @@ -202,7 +199,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].css.js" }, "devtool": "source-map", diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json index 2a370b612d7..988b4f259f2 100644 --- a/test/build/goldens/build-config-prod-env.golden.json +++ b/test/build/goldens/build-config-prod-env.golden.json @@ -4,7 +4,6 @@ "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", - "publicPath": "/assets/", "filename": "material-components-web.min.js", "libraryTarget": "umd", "library": "mdc" @@ -65,7 +64,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "mdc.[name].min.js", "libraryTarget": "umd", "library": [ @@ -107,7 +105,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].min.css.js" }, "devtool": "source-map", @@ -202,7 +199,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].min.css.js" }, "devtool": "source-map", diff --git a/test/build/webpack-module-exports.test.js b/test/build/webpack-module-exports.test.js index 74ded4c2d8b..d5a987e08b9 100644 --- a/test/build/webpack-module-exports.test.js +++ b/test/build/webpack-module-exports.test.js @@ -51,7 +51,7 @@ describe('webpack.config.js', () => { describe('MDC_ENV="development"', () => { it('module exports should match build-config-dev-env.golden.json', () => { const {generatedWebpackConfig, expectedWebpackConfig} = webpackConfigLoader.setupTest({ - configPath: path.join(__dirname, '../../webpack.config.js'), + configPath: path.join(__dirname, '../../demos/webpack.demo.js'), goldenPath: path.join(__dirname, './goldens/build-config-dev-env.golden.json'), mdcEnv: 'development', }); diff --git a/webpack.config.js b/webpack.config.js index 97e253ac3ca..e49e639f202 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -32,72 +32,13 @@ const pluginFactory = new PluginFactory({globber}); const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); -const OUT_DIR_ABS = pathResolver.getAbsolutePath('./build'); -const DEMO_ASSET_DIR_REL = '/assets/'; // Used by webpack-dev-server - -const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); - -module.exports = []; - -module.exports.push(jsBundleFactory.createMainJsCombined({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, -})); - -if (!env.isDev()) { - module.exports.push(jsBundleFactory.createMainJsALaCarte({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - })); - - module.exports.push(cssBundleFactory.createMainCssCombined({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - })); - - module.exports.push(cssBundleFactory.createMainCssALaCarte({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - })); -} - -if (env.isDev()) { - module.exports.push(cssBundleFactory.createCustomCss({ - bundleName: 'demo-css', - chunkGlobConfig: { - inputDirectory: '/demos', - }, - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - plugins: [ - copyrightBannerPlugin, - ], - })); - - module.exports.push(jsBundleFactory.createCustomJs({ - bundleName: 'demo-js', - chunks: { - 'common': pathResolver.getAbsolutePath('./demos/common.js'), - 'theme/index': pathResolver.getAbsolutePath('./demos/theme/index.js'), - }, - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - filename: '[name].js', - library: ['demo', '[name]'], - }, - plugins: [ - copyrightBannerPlugin, - ], - })); -} +const OUTPUT = { + fsDirAbsolutePath: pathResolver.getAbsolutePath('./build'), +}; + +module.exports = [ + jsBundleFactory.createMainJsCombined({output: OUTPUT}), + jsBundleFactory.createMainJsALaCarte({output: OUTPUT}), + cssBundleFactory.createMainCssCombined({output: OUTPUT}), + cssBundleFactory.createMainCssALaCarte({output: OUTPUT}), +]; From b61e1c02386af35a881a3526b22582ccdab6dba5 Mon Sep 17 00:00:00 2001 From: Andy Dvorak Date: Wed, 28 Feb 2018 16:03:26 -0500 Subject: [PATCH 07/12] Revert "chore: Extract webpack.demo.js from webpack.config.js" This reverts commit e54c250b2b3759a86de7b174450d67335f40642c. --- demos/webpack.demo.js | 78 ------------------ package.json | 6 +- scripts/check-pkg-for-release.js | 2 +- scripts/webpack/css-bundle-factory.js | 17 ++-- .../goldens/build-config-dev-env.golden.json | 6 ++ .../goldens/build-config-no-env.golden.json | 4 + .../goldens/build-config-prod-env.golden.json | 4 + test/build/webpack-module-exports.test.js | 2 +- webpack.config.js | 79 ++++++++++++++++--- 9 files changed, 93 insertions(+), 105 deletions(-) delete mode 100644 demos/webpack.demo.js diff --git a/demos/webpack.demo.js b/demos/webpack.demo.js deleted file mode 100644 index c6e07663611..00000000000 --- a/demos/webpack.demo.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * Copyright 2016 Google Inc. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -'use strict'; - -const CssBundleFactory = require('../scripts/webpack/css-bundle-factory'); -const Environment = require('../scripts/build/environment'); -const Globber = require('../scripts/webpack/globber'); -const JsBundleFactory = require('../scripts/webpack/js-bundle-factory'); -const PathResolver = require('../scripts/build/path-resolver'); -const PluginFactory = require('../scripts/webpack/plugin-factory'); - -const env = new Environment(); -env.setBabelEnv(); - -const pathResolver = new PathResolver(); -const globber = new Globber({pathResolver}); -const pluginFactory = new PluginFactory({globber}); -const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); -const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); -const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); - -const OUTPUT = { - httpDirAbsolutePath: '/assets/', -}; - -module.exports = [ - createMainJsCombined(), - createDemoCss(), - createDemoJs(), -]; - -function createMainJsCombined() { - return jsBundleFactory.createMainJsCombined({output: OUTPUT}); -} - -function createDemoJs() { - return jsBundleFactory.createCustomJs({ - bundleName: 'demo-js', - chunks: { - 'common': pathResolver.getAbsolutePath('./demos/common.js'), - 'theme/index': pathResolver.getAbsolutePath('./demos/theme/index.js'), - }, - output: Object.assign({}, OUTPUT, { - filename: '[name].js', - library: ['demo', '[name]'], - }), - plugins: [ - copyrightBannerPlugin, - ], - }); -} - -function createDemoCss() { - return cssBundleFactory.createCustomCss({ - bundleName: 'demo-css', - chunkGlobConfig: { - inputDirectory: '/demos', - }, - output: OUTPUT, - plugins: [ - copyrightBannerPlugin, - ], - }); -} diff --git a/package.json b/package.json index 07ae6792e6a..073cf0c8713 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,11 @@ "clean": "del-cli build/** build .closure-tmp/** .closure-tmp", "commitmsg": "validate-commit-msg", "dist": "npm run build && npm run build:min", - "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0 --config=demos/webpack.demo.js", - "fix:js": "eslint --fix packages test webpack.config.js demos/webpack.demo.js karma.conf.js", + "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0", + "fix:js": "eslint --fix packages test webpack.config.js karma.conf.js", "fix:css": "stylelint --fix packages/**/*.scss", "fix": "npm-run-all --parallel fix:*", - "lint:js": "eslint packages test scripts webpack.config.js demos/webpack.demo.js karma.conf.js", + "lint:js": "eslint packages test scripts webpack.config.js karma.conf.js", "lint:css": "stylelint packages/**/*.scss", "lint": "npm-run-all --parallel lint:*", "postinstall": "lerna bootstrap", diff --git a/scripts/check-pkg-for-release.js b/scripts/check-pkg-for-release.js index d50ec961d68..291eba4820f 100644 --- a/scripts/check-pkg-for-release.js +++ b/scripts/check-pkg-for-release.js @@ -88,7 +88,7 @@ function checkDependencyAddedInWebpackConfig() { function checkJSDependencyAddedInWebpackConfig() { const jsconfig = WEBPACK_CONFIG.find((value) => { - return value.name === 'main-js-a-la-carte'; + return value.name === 'js-components'; }); const nameCamel = camelCase(pkg.name.replace('@material/', '')); assert.notEqual(typeof jsconfig.entry[nameCamel], 'undefined', diff --git a/scripts/webpack/css-bundle-factory.js b/scripts/webpack/css-bundle-factory.js index b7912d77414..693a6c89be7 100644 --- a/scripts/webpack/css-bundle-factory.js +++ b/scripts/webpack/css-bundle-factory.js @@ -55,22 +55,13 @@ module.exports = class { filePathPattern = '**/*.scss', } = {}, output: { - fsDirAbsolutePath = undefined, // Required if you're building npm dist and writing output files to disk - httpDirAbsolutePath = undefined, // Required if you're running the demo server + fsDirAbsolutePath, + httpDirAbsolutePath, filenamePattern = this.env_.isProd() ? '[name].min.css' : '[name].css', }, plugins = [], }) { chunks = chunks || this.globber_.getChunks({inputDirectory, filePathPattern}); - - const fsCleanupPlugins = []; - - if (fsDirAbsolutePath) { - fsCleanupPlugins.push(this.pluginFactory_.createCssCleanupPlugin({ - cleanupDirRelativePath: fsDirAbsolutePath, - })); - } - const cssExtractorPlugin = this.pluginFactory_.createCssExtractorPlugin(filenamePattern); return { @@ -90,7 +81,9 @@ module.exports = class { }, plugins: [ cssExtractorPlugin, - ...fsCleanupPlugins, + this.pluginFactory_.createCssCleanupPlugin({ + cleanupDirRelativePath: fsDirAbsolutePath, + }), ...plugins, ], }; diff --git a/test/build/goldens/build-config-dev-env.golden.json b/test/build/goldens/build-config-dev-env.golden.json index a323997c6b8..6948dbbfacc 100644 --- a/test/build/goldens/build-config-dev-env.golden.json +++ b/test/build/goldens/build-config-dev-env.golden.json @@ -3,6 +3,7 @@ "name": "main-js-combined", "entry": "/packages/material-components-web/index.js", "output": { + "path": "/build", "publicPath": "/assets/", "filename": "material-components-web.js", "libraryTarget": "umd", @@ -72,6 +73,7 @@ "typography": "/demos/typography.scss" }, "output": { + "path": "/build", "publicPath": "/assets/", "filename": "[name].css.js" }, @@ -120,6 +122,9 @@ "id": 5, "options": {} }, + { + "cleanupDirRelativePath": "/build" + }, { "options": { "banner": "/*!\n Material Components for the Web\n Copyright (c) 2018 Google Inc.\n License: Apache-2.0\n*/", @@ -137,6 +142,7 @@ "theme/index": "/demos/theme/index.js" }, "output": { + "path": "/build", "publicPath": "/assets/", "filename": "[name].js", "libraryTarget": "umd", diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json index 6914c59f923..ade6ee6f845 100644 --- a/test/build/goldens/build-config-no-env.golden.json +++ b/test/build/goldens/build-config-no-env.golden.json @@ -4,6 +4,7 @@ "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", + "publicPath": "/assets/", "filename": "material-components-web.js", "libraryTarget": "umd", "library": "mdc" @@ -64,6 +65,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "mdc.[name].js", "libraryTarget": "umd", "library": [ @@ -105,6 +107,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "[name].css.js" }, "devtool": "source-map", @@ -199,6 +202,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "[name].css.js" }, "devtool": "source-map", diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json index 988b4f259f2..2a370b612d7 100644 --- a/test/build/goldens/build-config-prod-env.golden.json +++ b/test/build/goldens/build-config-prod-env.golden.json @@ -4,6 +4,7 @@ "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", + "publicPath": "/assets/", "filename": "material-components-web.min.js", "libraryTarget": "umd", "library": "mdc" @@ -64,6 +65,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "mdc.[name].min.js", "libraryTarget": "umd", "library": [ @@ -105,6 +107,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "[name].min.css.js" }, "devtool": "source-map", @@ -199,6 +202,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "[name].min.css.js" }, "devtool": "source-map", diff --git a/test/build/webpack-module-exports.test.js b/test/build/webpack-module-exports.test.js index d5a987e08b9..74ded4c2d8b 100644 --- a/test/build/webpack-module-exports.test.js +++ b/test/build/webpack-module-exports.test.js @@ -51,7 +51,7 @@ describe('webpack.config.js', () => { describe('MDC_ENV="development"', () => { it('module exports should match build-config-dev-env.golden.json', () => { const {generatedWebpackConfig, expectedWebpackConfig} = webpackConfigLoader.setupTest({ - configPath: path.join(__dirname, '../../demos/webpack.demo.js'), + configPath: path.join(__dirname, '../../webpack.config.js'), goldenPath: path.join(__dirname, './goldens/build-config-dev-env.golden.json'), mdcEnv: 'development', }); diff --git a/webpack.config.js b/webpack.config.js index e49e639f202..97e253ac3ca 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -32,13 +32,72 @@ const pluginFactory = new PluginFactory({globber}); const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); -const OUTPUT = { - fsDirAbsolutePath: pathResolver.getAbsolutePath('./build'), -}; - -module.exports = [ - jsBundleFactory.createMainJsCombined({output: OUTPUT}), - jsBundleFactory.createMainJsALaCarte({output: OUTPUT}), - cssBundleFactory.createMainCssCombined({output: OUTPUT}), - cssBundleFactory.createMainCssALaCarte({output: OUTPUT}), -]; +const OUT_DIR_ABS = pathResolver.getAbsolutePath('./build'); +const DEMO_ASSET_DIR_REL = '/assets/'; // Used by webpack-dev-server + +const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); + +module.exports = []; + +module.exports.push(jsBundleFactory.createMainJsCombined({ + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + }, +})); + +if (!env.isDev()) { + module.exports.push(jsBundleFactory.createMainJsALaCarte({ + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + }, + })); + + module.exports.push(cssBundleFactory.createMainCssCombined({ + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + }, + })); + + module.exports.push(cssBundleFactory.createMainCssALaCarte({ + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + }, + })); +} + +if (env.isDev()) { + module.exports.push(cssBundleFactory.createCustomCss({ + bundleName: 'demo-css', + chunkGlobConfig: { + inputDirectory: '/demos', + }, + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + }, + plugins: [ + copyrightBannerPlugin, + ], + })); + + module.exports.push(jsBundleFactory.createCustomJs({ + bundleName: 'demo-js', + chunks: { + 'common': pathResolver.getAbsolutePath('./demos/common.js'), + 'theme/index': pathResolver.getAbsolutePath('./demos/theme/index.js'), + }, + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + filename: '[name].js', + library: ['demo', '[name]'], + }, + plugins: [ + copyrightBannerPlugin, + ], + })); +} From 102f6cf5a2baab8a2edcb027ea371db2624e7d18 Mon Sep 17 00:00:00 2001 From: "Andrew C. Dvorak" Date: Fri, 9 Mar 2018 11:51:35 -0800 Subject: [PATCH 08/12] chore: Move demo Webpack config to separate file Fixes #1994 --- demos/webpack.config.js | 78 ++++++++++++++++++ package.json | 6 +- scripts/webpack/css-bundle-factory.js | 17 ++-- scripts/webpack/js-bundle-factory.js | 6 +- .../goldens/build-config-dev-env.golden.json | 6 -- .../goldens/build-config-no-env.golden.json | 4 - .../goldens/build-config-prod-env.golden.json | 4 - test/build/webpack-module-exports.test.js | 2 +- webpack.config.js | 79 +++---------------- 9 files changed, 107 insertions(+), 95 deletions(-) create mode 100644 demos/webpack.config.js diff --git a/demos/webpack.config.js b/demos/webpack.config.js new file mode 100644 index 00000000000..9c1a2ed21dd --- /dev/null +++ b/demos/webpack.config.js @@ -0,0 +1,78 @@ +/** + * Copyright 2016 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +const CssBundleFactory = require('../scripts/webpack/css-bundle-factory'); +const Environment = require('../scripts/build/environment'); +const Globber = require('../scripts/webpack/globber'); +const JsBundleFactory = require('../scripts/webpack/js-bundle-factory'); +const PathResolver = require('../scripts/build/path-resolver'); +const PluginFactory = require('../scripts/webpack/plugin-factory'); + +const env = new Environment(); +env.setBabelEnv(); + +const pathResolver = new PathResolver(); +const globber = new Globber({pathResolver}); +const pluginFactory = new PluginFactory({globber}); +const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); +const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); +const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); + +const OUTPUT = { + httpDirAbsolutePath: '/assets/', +}; + +module.exports = [ + mainJsCombined(), + demoCss(), + demoJs(), +]; + +function mainJsCombined() { + return jsBundleFactory.createMainJsCombined({output: OUTPUT}); +} + +function demoJs() { + return jsBundleFactory.createCustomJs({ + bundleName: 'demo-js', + chunks: { + 'common': pathResolver.getAbsolutePath('./demos/common.js'), + 'theme/index': pathResolver.getAbsolutePath('./demos/theme/index.js'), + }, + output: Object.assign({}, OUTPUT, { + filename: '[name].js', + library: ['demo', '[name]'], + }), + plugins: [ + copyrightBannerPlugin, + ], + }); +} + +function demoCss() { + return cssBundleFactory.createCustomCss({ + bundleName: 'demo-css', + chunkGlobConfig: { + inputDirectory: '/demos', + }, + output: OUTPUT, + plugins: [ + copyrightBannerPlugin, + ], + }); +} diff --git a/package.json b/package.json index 073cf0c8713..2b0376b2f67 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,11 @@ "clean": "del-cli build/** build .closure-tmp/** .closure-tmp", "commitmsg": "validate-commit-msg", "dist": "npm run build && npm run build:min", - "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0", - "fix:js": "eslint --fix packages test webpack.config.js karma.conf.js", + "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0 --config=demos/webpack.config.js", + "fix:js": "eslint --fix packages test webpack.config.js demos/webpack.config.js karma.conf.js", "fix:css": "stylelint --fix packages/**/*.scss", "fix": "npm-run-all --parallel fix:*", - "lint:js": "eslint packages test scripts webpack.config.js karma.conf.js", + "lint:js": "eslint packages test scripts webpack.config.js demos/webpack.config.js karma.conf.js", "lint:css": "stylelint packages/**/*.scss", "lint": "npm-run-all --parallel lint:*", "postinstall": "lerna bootstrap", diff --git a/scripts/webpack/css-bundle-factory.js b/scripts/webpack/css-bundle-factory.js index 693a6c89be7..749565e4c1a 100644 --- a/scripts/webpack/css-bundle-factory.js +++ b/scripts/webpack/css-bundle-factory.js @@ -55,13 +55,22 @@ module.exports = class { filePathPattern = '**/*.scss', } = {}, output: { - fsDirAbsolutePath, - httpDirAbsolutePath, + fsDirAbsolutePath = undefined, // Required for building the npm distribution and writing output files to disk + httpDirAbsolutePath = undefined, // Required for running the demo server filenamePattern = this.env_.isProd() ? '[name].min.css' : '[name].css', }, plugins = [], }) { chunks = chunks || this.globber_.getChunks({inputDirectory, filePathPattern}); + + const fsCleanupPlugins = []; + + if (fsDirAbsolutePath) { + fsCleanupPlugins.push(this.pluginFactory_.createCssCleanupPlugin({ + cleanupDirRelativePath: fsDirAbsolutePath, + })); + } + const cssExtractorPlugin = this.pluginFactory_.createCssExtractorPlugin(filenamePattern); return { @@ -81,9 +90,7 @@ module.exports = class { }, plugins: [ cssExtractorPlugin, - this.pluginFactory_.createCssCleanupPlugin({ - cleanupDirRelativePath: fsDirAbsolutePath, - }), + ...fsCleanupPlugins, ...plugins, ], }; diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js index 262b48e039a..353edafe7d3 100644 --- a/scripts/webpack/js-bundle-factory.js +++ b/scripts/webpack/js-bundle-factory.js @@ -46,11 +46,11 @@ class JsBundleFactory { chunks, chunkGlobConfig: { inputDirectory = null, - filePathPattern = null, + filePathPattern = '**/*.js', } = {}, output: { - fsDirAbsolutePath, - httpDirAbsolutePath, + fsDirAbsolutePath = undefined, // Required for building the npm distribution and writing output files to disk + httpDirAbsolutePath = undefined, // Required for running the demo server filenamePattern = this.env_.isProd() ? '[name].min.js' : '[name].js', library, }, diff --git a/test/build/goldens/build-config-dev-env.golden.json b/test/build/goldens/build-config-dev-env.golden.json index 6948dbbfacc..a323997c6b8 100644 --- a/test/build/goldens/build-config-dev-env.golden.json +++ b/test/build/goldens/build-config-dev-env.golden.json @@ -3,7 +3,6 @@ "name": "main-js-combined", "entry": "/packages/material-components-web/index.js", "output": { - "path": "/build", "publicPath": "/assets/", "filename": "material-components-web.js", "libraryTarget": "umd", @@ -73,7 +72,6 @@ "typography": "/demos/typography.scss" }, "output": { - "path": "/build", "publicPath": "/assets/", "filename": "[name].css.js" }, @@ -122,9 +120,6 @@ "id": 5, "options": {} }, - { - "cleanupDirRelativePath": "/build" - }, { "options": { "banner": "/*!\n Material Components for the Web\n Copyright (c) 2018 Google Inc.\n License: Apache-2.0\n*/", @@ -142,7 +137,6 @@ "theme/index": "/demos/theme/index.js" }, "output": { - "path": "/build", "publicPath": "/assets/", "filename": "[name].js", "libraryTarget": "umd", diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json index ade6ee6f845..6914c59f923 100644 --- a/test/build/goldens/build-config-no-env.golden.json +++ b/test/build/goldens/build-config-no-env.golden.json @@ -4,7 +4,6 @@ "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", - "publicPath": "/assets/", "filename": "material-components-web.js", "libraryTarget": "umd", "library": "mdc" @@ -65,7 +64,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "mdc.[name].js", "libraryTarget": "umd", "library": [ @@ -107,7 +105,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].css.js" }, "devtool": "source-map", @@ -202,7 +199,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].css.js" }, "devtool": "source-map", diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json index 2a370b612d7..988b4f259f2 100644 --- a/test/build/goldens/build-config-prod-env.golden.json +++ b/test/build/goldens/build-config-prod-env.golden.json @@ -4,7 +4,6 @@ "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", - "publicPath": "/assets/", "filename": "material-components-web.min.js", "libraryTarget": "umd", "library": "mdc" @@ -65,7 +64,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "mdc.[name].min.js", "libraryTarget": "umd", "library": [ @@ -107,7 +105,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].min.css.js" }, "devtool": "source-map", @@ -202,7 +199,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].min.css.js" }, "devtool": "source-map", diff --git a/test/build/webpack-module-exports.test.js b/test/build/webpack-module-exports.test.js index 74ded4c2d8b..e7e9d017433 100644 --- a/test/build/webpack-module-exports.test.js +++ b/test/build/webpack-module-exports.test.js @@ -51,7 +51,7 @@ describe('webpack.config.js', () => { describe('MDC_ENV="development"', () => { it('module exports should match build-config-dev-env.golden.json', () => { const {generatedWebpackConfig, expectedWebpackConfig} = webpackConfigLoader.setupTest({ - configPath: path.join(__dirname, '../../webpack.config.js'), + configPath: path.join(__dirname, '../../demos/webpack.config.js'), goldenPath: path.join(__dirname, './goldens/build-config-dev-env.golden.json'), mdcEnv: 'development', }); diff --git a/webpack.config.js b/webpack.config.js index 97e253ac3ca..e49e639f202 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -32,72 +32,13 @@ const pluginFactory = new PluginFactory({globber}); const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); -const OUT_DIR_ABS = pathResolver.getAbsolutePath('./build'); -const DEMO_ASSET_DIR_REL = '/assets/'; // Used by webpack-dev-server - -const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); - -module.exports = []; - -module.exports.push(jsBundleFactory.createMainJsCombined({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, -})); - -if (!env.isDev()) { - module.exports.push(jsBundleFactory.createMainJsALaCarte({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - })); - - module.exports.push(cssBundleFactory.createMainCssCombined({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - })); - - module.exports.push(cssBundleFactory.createMainCssALaCarte({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - })); -} - -if (env.isDev()) { - module.exports.push(cssBundleFactory.createCustomCss({ - bundleName: 'demo-css', - chunkGlobConfig: { - inputDirectory: '/demos', - }, - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - plugins: [ - copyrightBannerPlugin, - ], - })); - - module.exports.push(jsBundleFactory.createCustomJs({ - bundleName: 'demo-js', - chunks: { - 'common': pathResolver.getAbsolutePath('./demos/common.js'), - 'theme/index': pathResolver.getAbsolutePath('./demos/theme/index.js'), - }, - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - filename: '[name].js', - library: ['demo', '[name]'], - }, - plugins: [ - copyrightBannerPlugin, - ], - })); -} +const OUTPUT = { + fsDirAbsolutePath: pathResolver.getAbsolutePath('./build'), +}; + +module.exports = [ + jsBundleFactory.createMainJsCombined({output: OUTPUT}), + jsBundleFactory.createMainJsALaCarte({output: OUTPUT}), + cssBundleFactory.createMainCssCombined({output: OUTPUT}), + cssBundleFactory.createMainCssALaCarte({output: OUTPUT}), +]; From 0da48bf745bfd0e206bd96396eee733c5745205d Mon Sep 17 00:00:00 2001 From: "Andrew C. Dvorak" Date: Fri, 9 Mar 2018 11:51:35 -0800 Subject: [PATCH 09/12] Revert "chore: Move demo Webpack config to separate file" This reverts commit 102f6cf5a2baab8a2edcb027ea371db2624e7d18. --- demos/webpack.config.js | 78 ------------------ package.json | 6 +- scripts/webpack/css-bundle-factory.js | 17 ++-- scripts/webpack/js-bundle-factory.js | 6 +- .../goldens/build-config-dev-env.golden.json | 6 ++ .../goldens/build-config-no-env.golden.json | 4 + .../goldens/build-config-prod-env.golden.json | 4 + test/build/webpack-module-exports.test.js | 2 +- webpack.config.js | 79 ++++++++++++++++--- 9 files changed, 95 insertions(+), 107 deletions(-) delete mode 100644 demos/webpack.config.js diff --git a/demos/webpack.config.js b/demos/webpack.config.js deleted file mode 100644 index 9c1a2ed21dd..00000000000 --- a/demos/webpack.config.js +++ /dev/null @@ -1,78 +0,0 @@ -/** - * Copyright 2016 Google Inc. All Rights Reserved. - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -'use strict'; - -const CssBundleFactory = require('../scripts/webpack/css-bundle-factory'); -const Environment = require('../scripts/build/environment'); -const Globber = require('../scripts/webpack/globber'); -const JsBundleFactory = require('../scripts/webpack/js-bundle-factory'); -const PathResolver = require('../scripts/build/path-resolver'); -const PluginFactory = require('../scripts/webpack/plugin-factory'); - -const env = new Environment(); -env.setBabelEnv(); - -const pathResolver = new PathResolver(); -const globber = new Globber({pathResolver}); -const pluginFactory = new PluginFactory({globber}); -const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); -const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); -const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); - -const OUTPUT = { - httpDirAbsolutePath: '/assets/', -}; - -module.exports = [ - mainJsCombined(), - demoCss(), - demoJs(), -]; - -function mainJsCombined() { - return jsBundleFactory.createMainJsCombined({output: OUTPUT}); -} - -function demoJs() { - return jsBundleFactory.createCustomJs({ - bundleName: 'demo-js', - chunks: { - 'common': pathResolver.getAbsolutePath('./demos/common.js'), - 'theme/index': pathResolver.getAbsolutePath('./demos/theme/index.js'), - }, - output: Object.assign({}, OUTPUT, { - filename: '[name].js', - library: ['demo', '[name]'], - }), - plugins: [ - copyrightBannerPlugin, - ], - }); -} - -function demoCss() { - return cssBundleFactory.createCustomCss({ - bundleName: 'demo-css', - chunkGlobConfig: { - inputDirectory: '/demos', - }, - output: OUTPUT, - plugins: [ - copyrightBannerPlugin, - ], - }); -} diff --git a/package.json b/package.json index 2b0376b2f67..073cf0c8713 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,11 @@ "clean": "del-cli build/** build .closure-tmp/** .closure-tmp", "commitmsg": "validate-commit-msg", "dist": "npm run build && npm run build:min", - "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0 --config=demos/webpack.config.js", - "fix:js": "eslint --fix packages test webpack.config.js demos/webpack.config.js karma.conf.js", + "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0", + "fix:js": "eslint --fix packages test webpack.config.js karma.conf.js", "fix:css": "stylelint --fix packages/**/*.scss", "fix": "npm-run-all --parallel fix:*", - "lint:js": "eslint packages test scripts webpack.config.js demos/webpack.config.js karma.conf.js", + "lint:js": "eslint packages test scripts webpack.config.js karma.conf.js", "lint:css": "stylelint packages/**/*.scss", "lint": "npm-run-all --parallel lint:*", "postinstall": "lerna bootstrap", diff --git a/scripts/webpack/css-bundle-factory.js b/scripts/webpack/css-bundle-factory.js index 749565e4c1a..693a6c89be7 100644 --- a/scripts/webpack/css-bundle-factory.js +++ b/scripts/webpack/css-bundle-factory.js @@ -55,22 +55,13 @@ module.exports = class { filePathPattern = '**/*.scss', } = {}, output: { - fsDirAbsolutePath = undefined, // Required for building the npm distribution and writing output files to disk - httpDirAbsolutePath = undefined, // Required for running the demo server + fsDirAbsolutePath, + httpDirAbsolutePath, filenamePattern = this.env_.isProd() ? '[name].min.css' : '[name].css', }, plugins = [], }) { chunks = chunks || this.globber_.getChunks({inputDirectory, filePathPattern}); - - const fsCleanupPlugins = []; - - if (fsDirAbsolutePath) { - fsCleanupPlugins.push(this.pluginFactory_.createCssCleanupPlugin({ - cleanupDirRelativePath: fsDirAbsolutePath, - })); - } - const cssExtractorPlugin = this.pluginFactory_.createCssExtractorPlugin(filenamePattern); return { @@ -90,7 +81,9 @@ module.exports = class { }, plugins: [ cssExtractorPlugin, - ...fsCleanupPlugins, + this.pluginFactory_.createCssCleanupPlugin({ + cleanupDirRelativePath: fsDirAbsolutePath, + }), ...plugins, ], }; diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js index 353edafe7d3..262b48e039a 100644 --- a/scripts/webpack/js-bundle-factory.js +++ b/scripts/webpack/js-bundle-factory.js @@ -46,11 +46,11 @@ class JsBundleFactory { chunks, chunkGlobConfig: { inputDirectory = null, - filePathPattern = '**/*.js', + filePathPattern = null, } = {}, output: { - fsDirAbsolutePath = undefined, // Required for building the npm distribution and writing output files to disk - httpDirAbsolutePath = undefined, // Required for running the demo server + fsDirAbsolutePath, + httpDirAbsolutePath, filenamePattern = this.env_.isProd() ? '[name].min.js' : '[name].js', library, }, diff --git a/test/build/goldens/build-config-dev-env.golden.json b/test/build/goldens/build-config-dev-env.golden.json index a323997c6b8..6948dbbfacc 100644 --- a/test/build/goldens/build-config-dev-env.golden.json +++ b/test/build/goldens/build-config-dev-env.golden.json @@ -3,6 +3,7 @@ "name": "main-js-combined", "entry": "/packages/material-components-web/index.js", "output": { + "path": "/build", "publicPath": "/assets/", "filename": "material-components-web.js", "libraryTarget": "umd", @@ -72,6 +73,7 @@ "typography": "/demos/typography.scss" }, "output": { + "path": "/build", "publicPath": "/assets/", "filename": "[name].css.js" }, @@ -120,6 +122,9 @@ "id": 5, "options": {} }, + { + "cleanupDirRelativePath": "/build" + }, { "options": { "banner": "/*!\n Material Components for the Web\n Copyright (c) 2018 Google Inc.\n License: Apache-2.0\n*/", @@ -137,6 +142,7 @@ "theme/index": "/demos/theme/index.js" }, "output": { + "path": "/build", "publicPath": "/assets/", "filename": "[name].js", "libraryTarget": "umd", diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json index 6914c59f923..ade6ee6f845 100644 --- a/test/build/goldens/build-config-no-env.golden.json +++ b/test/build/goldens/build-config-no-env.golden.json @@ -4,6 +4,7 @@ "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", + "publicPath": "/assets/", "filename": "material-components-web.js", "libraryTarget": "umd", "library": "mdc" @@ -64,6 +65,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "mdc.[name].js", "libraryTarget": "umd", "library": [ @@ -105,6 +107,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "[name].css.js" }, "devtool": "source-map", @@ -199,6 +202,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "[name].css.js" }, "devtool": "source-map", diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json index 988b4f259f2..2a370b612d7 100644 --- a/test/build/goldens/build-config-prod-env.golden.json +++ b/test/build/goldens/build-config-prod-env.golden.json @@ -4,6 +4,7 @@ "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", + "publicPath": "/assets/", "filename": "material-components-web.min.js", "libraryTarget": "umd", "library": "mdc" @@ -64,6 +65,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "mdc.[name].min.js", "libraryTarget": "umd", "library": [ @@ -105,6 +107,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "[name].min.css.js" }, "devtool": "source-map", @@ -199,6 +202,7 @@ }, "output": { "path": "/build", + "publicPath": "/assets/", "filename": "[name].min.css.js" }, "devtool": "source-map", diff --git a/test/build/webpack-module-exports.test.js b/test/build/webpack-module-exports.test.js index e7e9d017433..74ded4c2d8b 100644 --- a/test/build/webpack-module-exports.test.js +++ b/test/build/webpack-module-exports.test.js @@ -51,7 +51,7 @@ describe('webpack.config.js', () => { describe('MDC_ENV="development"', () => { it('module exports should match build-config-dev-env.golden.json', () => { const {generatedWebpackConfig, expectedWebpackConfig} = webpackConfigLoader.setupTest({ - configPath: path.join(__dirname, '../../demos/webpack.config.js'), + configPath: path.join(__dirname, '../../webpack.config.js'), goldenPath: path.join(__dirname, './goldens/build-config-dev-env.golden.json'), mdcEnv: 'development', }); diff --git a/webpack.config.js b/webpack.config.js index e49e639f202..97e253ac3ca 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -32,13 +32,72 @@ const pluginFactory = new PluginFactory({globber}); const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); -const OUTPUT = { - fsDirAbsolutePath: pathResolver.getAbsolutePath('./build'), -}; - -module.exports = [ - jsBundleFactory.createMainJsCombined({output: OUTPUT}), - jsBundleFactory.createMainJsALaCarte({output: OUTPUT}), - cssBundleFactory.createMainCssCombined({output: OUTPUT}), - cssBundleFactory.createMainCssALaCarte({output: OUTPUT}), -]; +const OUT_DIR_ABS = pathResolver.getAbsolutePath('./build'); +const DEMO_ASSET_DIR_REL = '/assets/'; // Used by webpack-dev-server + +const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); + +module.exports = []; + +module.exports.push(jsBundleFactory.createMainJsCombined({ + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + }, +})); + +if (!env.isDev()) { + module.exports.push(jsBundleFactory.createMainJsALaCarte({ + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + }, + })); + + module.exports.push(cssBundleFactory.createMainCssCombined({ + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + }, + })); + + module.exports.push(cssBundleFactory.createMainCssALaCarte({ + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + }, + })); +} + +if (env.isDev()) { + module.exports.push(cssBundleFactory.createCustomCss({ + bundleName: 'demo-css', + chunkGlobConfig: { + inputDirectory: '/demos', + }, + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + }, + plugins: [ + copyrightBannerPlugin, + ], + })); + + module.exports.push(jsBundleFactory.createCustomJs({ + bundleName: 'demo-js', + chunks: { + 'common': pathResolver.getAbsolutePath('./demos/common.js'), + 'theme/index': pathResolver.getAbsolutePath('./demos/theme/index.js'), + }, + output: { + fsDirAbsolutePath: OUT_DIR_ABS, + httpDirAbsolutePath: DEMO_ASSET_DIR_REL, + filename: '[name].js', + library: ['demo', '[name]'], + }, + plugins: [ + copyrightBannerPlugin, + ], + })); +} From b3790ee920a07276f4161b7551ddebad1cd42739 Mon Sep 17 00:00:00 2001 From: "Andrew C. Dvorak" Date: Fri, 9 Mar 2018 11:51:35 -0800 Subject: [PATCH 10/12] chore: Move demo Webpack config to separate file Fixes #1994 --- demos/webpack.config.js | 78 ++++++++++++++++++ package.json | 6 +- scripts/webpack/css-bundle-factory.js | 17 ++-- scripts/webpack/js-bundle-factory.js | 6 +- .../goldens/build-config-dev-env.golden.json | 6 -- .../goldens/build-config-no-env.golden.json | 4 - .../goldens/build-config-prod-env.golden.json | 4 - test/build/webpack-module-exports.test.js | 2 +- webpack.config.js | 79 +++---------------- 9 files changed, 107 insertions(+), 95 deletions(-) create mode 100644 demos/webpack.config.js diff --git a/demos/webpack.config.js b/demos/webpack.config.js new file mode 100644 index 00000000000..9c1a2ed21dd --- /dev/null +++ b/demos/webpack.config.js @@ -0,0 +1,78 @@ +/** + * Copyright 2016 Google Inc. All Rights Reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +const CssBundleFactory = require('../scripts/webpack/css-bundle-factory'); +const Environment = require('../scripts/build/environment'); +const Globber = require('../scripts/webpack/globber'); +const JsBundleFactory = require('../scripts/webpack/js-bundle-factory'); +const PathResolver = require('../scripts/build/path-resolver'); +const PluginFactory = require('../scripts/webpack/plugin-factory'); + +const env = new Environment(); +env.setBabelEnv(); + +const pathResolver = new PathResolver(); +const globber = new Globber({pathResolver}); +const pluginFactory = new PluginFactory({globber}); +const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); +const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); +const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); + +const OUTPUT = { + httpDirAbsolutePath: '/assets/', +}; + +module.exports = [ + mainJsCombined(), + demoCss(), + demoJs(), +]; + +function mainJsCombined() { + return jsBundleFactory.createMainJsCombined({output: OUTPUT}); +} + +function demoJs() { + return jsBundleFactory.createCustomJs({ + bundleName: 'demo-js', + chunks: { + 'common': pathResolver.getAbsolutePath('./demos/common.js'), + 'theme/index': pathResolver.getAbsolutePath('./demos/theme/index.js'), + }, + output: Object.assign({}, OUTPUT, { + filename: '[name].js', + library: ['demo', '[name]'], + }), + plugins: [ + copyrightBannerPlugin, + ], + }); +} + +function demoCss() { + return cssBundleFactory.createCustomCss({ + bundleName: 'demo-css', + chunkGlobConfig: { + inputDirectory: '/demos', + }, + output: OUTPUT, + plugins: [ + copyrightBannerPlugin, + ], + }); +} diff --git a/package.json b/package.json index 39194f81308..5e9b3c439d4 100644 --- a/package.json +++ b/package.json @@ -9,11 +9,11 @@ "clean": "del-cli build/** build .closure-tmp/** .closure-tmp", "commitmsg": "validate-commit-msg", "dist": "npm run build && npm run build:min", - "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0", - "fix:js": "eslint --fix packages test webpack.config.js karma.conf.js", + "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0 --config=demos/webpack.config.js", + "fix:js": "eslint --fix packages test webpack.config.js demos/webpack.config.js karma.conf.js", "fix:css": "stylelint --fix packages/**/*.scss", "fix": "npm-run-all --parallel fix:*", - "lint:js": "eslint packages test scripts webpack.config.js karma.conf.js", + "lint:js": "eslint packages test scripts webpack.config.js demos/webpack.config.js karma.conf.js", "lint:css": "stylelint packages/**/*.scss", "lint": "npm-run-all --parallel lint:*", "postinstall": "lerna bootstrap", diff --git a/scripts/webpack/css-bundle-factory.js b/scripts/webpack/css-bundle-factory.js index d95ea4d78b5..b7a156896eb 100644 --- a/scripts/webpack/css-bundle-factory.js +++ b/scripts/webpack/css-bundle-factory.js @@ -55,13 +55,22 @@ module.exports = class { filePathPattern = '**/*.scss', } = {}, output: { - fsDirAbsolutePath, - httpDirAbsolutePath, + fsDirAbsolutePath = undefined, // Required for building the npm distribution and writing output files to disk + httpDirAbsolutePath = undefined, // Required for running the demo server filenamePattern = this.env_.isProd() ? '[name].min.css' : '[name].css', }, plugins = [], }) { chunks = chunks || this.globber_.getChunks({inputDirectory, filePathPattern}); + + const fsCleanupPlugins = []; + + if (fsDirAbsolutePath) { + fsCleanupPlugins.push(this.pluginFactory_.createCssCleanupPlugin({ + cleanupDirRelativePath: fsDirAbsolutePath, + })); + } + const cssExtractorPlugin = this.pluginFactory_.createCssExtractorPlugin(filenamePattern); return { @@ -81,9 +90,7 @@ module.exports = class { }, plugins: [ cssExtractorPlugin, - this.pluginFactory_.createCssCleanupPlugin({ - cleanupDirRelativePath: fsDirAbsolutePath, - }), + ...fsCleanupPlugins, ...plugins, ], }; diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js index 90d20c241d2..1d217e5866f 100644 --- a/scripts/webpack/js-bundle-factory.js +++ b/scripts/webpack/js-bundle-factory.js @@ -46,11 +46,11 @@ class JsBundleFactory { chunks, chunkGlobConfig: { inputDirectory = null, - filePathPattern = null, + filePathPattern = '**/*.js', } = {}, output: { - fsDirAbsolutePath, - httpDirAbsolutePath, + fsDirAbsolutePath = undefined, // Required for building the npm distribution and writing output files to disk + httpDirAbsolutePath = undefined, // Required for running the demo server filenamePattern = this.env_.isProd() ? '[name].min.js' : '[name].js', library, }, diff --git a/test/build/goldens/build-config-dev-env.golden.json b/test/build/goldens/build-config-dev-env.golden.json index 6948dbbfacc..a323997c6b8 100644 --- a/test/build/goldens/build-config-dev-env.golden.json +++ b/test/build/goldens/build-config-dev-env.golden.json @@ -3,7 +3,6 @@ "name": "main-js-combined", "entry": "/packages/material-components-web/index.js", "output": { - "path": "/build", "publicPath": "/assets/", "filename": "material-components-web.js", "libraryTarget": "umd", @@ -73,7 +72,6 @@ "typography": "/demos/typography.scss" }, "output": { - "path": "/build", "publicPath": "/assets/", "filename": "[name].css.js" }, @@ -122,9 +120,6 @@ "id": 5, "options": {} }, - { - "cleanupDirRelativePath": "/build" - }, { "options": { "banner": "/*!\n Material Components for the Web\n Copyright (c) 2018 Google Inc.\n License: Apache-2.0\n*/", @@ -142,7 +137,6 @@ "theme/index": "/demos/theme/index.js" }, "output": { - "path": "/build", "publicPath": "/assets/", "filename": "[name].js", "libraryTarget": "umd", diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json index d4f9b980c9b..a6e5b5ad370 100644 --- a/test/build/goldens/build-config-no-env.golden.json +++ b/test/build/goldens/build-config-no-env.golden.json @@ -4,7 +4,6 @@ "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", - "publicPath": "/assets/", "filename": "material-components-web.js", "libraryTarget": "umd", "library": "mdc" @@ -66,7 +65,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "mdc.[name].js", "libraryTarget": "umd", "library": [ @@ -108,7 +106,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].css.js" }, "devtool": "source-map", @@ -204,7 +201,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].css.js" }, "devtool": "source-map", diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json index e26bc345b9f..c833071c949 100644 --- a/test/build/goldens/build-config-prod-env.golden.json +++ b/test/build/goldens/build-config-prod-env.golden.json @@ -4,7 +4,6 @@ "entry": "/packages/material-components-web/index.js", "output": { "path": "/build", - "publicPath": "/assets/", "filename": "material-components-web.min.js", "libraryTarget": "umd", "library": "mdc" @@ -66,7 +65,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "mdc.[name].min.js", "libraryTarget": "umd", "library": [ @@ -108,7 +106,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].min.css.js" }, "devtool": "source-map", @@ -204,7 +201,6 @@ }, "output": { "path": "/build", - "publicPath": "/assets/", "filename": "[name].min.css.js" }, "devtool": "source-map", diff --git a/test/build/webpack-module-exports.test.js b/test/build/webpack-module-exports.test.js index 74ded4c2d8b..e7e9d017433 100644 --- a/test/build/webpack-module-exports.test.js +++ b/test/build/webpack-module-exports.test.js @@ -51,7 +51,7 @@ describe('webpack.config.js', () => { describe('MDC_ENV="development"', () => { it('module exports should match build-config-dev-env.golden.json', () => { const {generatedWebpackConfig, expectedWebpackConfig} = webpackConfigLoader.setupTest({ - configPath: path.join(__dirname, '../../webpack.config.js'), + configPath: path.join(__dirname, '../../demos/webpack.config.js'), goldenPath: path.join(__dirname, './goldens/build-config-dev-env.golden.json'), mdcEnv: 'development', }); diff --git a/webpack.config.js b/webpack.config.js index 97e253ac3ca..e49e639f202 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -32,72 +32,13 @@ const pluginFactory = new PluginFactory({globber}); const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); -const OUT_DIR_ABS = pathResolver.getAbsolutePath('./build'); -const DEMO_ASSET_DIR_REL = '/assets/'; // Used by webpack-dev-server - -const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); - -module.exports = []; - -module.exports.push(jsBundleFactory.createMainJsCombined({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, -})); - -if (!env.isDev()) { - module.exports.push(jsBundleFactory.createMainJsALaCarte({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - })); - - module.exports.push(cssBundleFactory.createMainCssCombined({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - })); - - module.exports.push(cssBundleFactory.createMainCssALaCarte({ - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - })); -} - -if (env.isDev()) { - module.exports.push(cssBundleFactory.createCustomCss({ - bundleName: 'demo-css', - chunkGlobConfig: { - inputDirectory: '/demos', - }, - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - }, - plugins: [ - copyrightBannerPlugin, - ], - })); - - module.exports.push(jsBundleFactory.createCustomJs({ - bundleName: 'demo-js', - chunks: { - 'common': pathResolver.getAbsolutePath('./demos/common.js'), - 'theme/index': pathResolver.getAbsolutePath('./demos/theme/index.js'), - }, - output: { - fsDirAbsolutePath: OUT_DIR_ABS, - httpDirAbsolutePath: DEMO_ASSET_DIR_REL, - filename: '[name].js', - library: ['demo', '[name]'], - }, - plugins: [ - copyrightBannerPlugin, - ], - })); -} +const OUTPUT = { + fsDirAbsolutePath: pathResolver.getAbsolutePath('./build'), +}; + +module.exports = [ + jsBundleFactory.createMainJsCombined({output: OUTPUT}), + jsBundleFactory.createMainJsALaCarte({output: OUTPUT}), + cssBundleFactory.createMainCssCombined({output: OUTPUT}), + cssBundleFactory.createMainCssALaCarte({output: OUTPUT}), +]; From 205e5193f6cc0907e172a4b402f876ff9559e016 Mon Sep 17 00:00:00 2001 From: "Andrew C. Dvorak" Date: Fri, 9 Mar 2018 15:05:04 -0800 Subject: [PATCH 11/12] WIP: Remove unused variable --- webpack.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/webpack.config.js b/webpack.config.js index c13c0a3e8c5..e49e639f202 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -29,7 +29,6 @@ env.setBabelEnv(); const pathResolver = new PathResolver(); const globber = new Globber({pathResolver}); const pluginFactory = new PluginFactory({globber}); -const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); From 06ef11a0b54c539446e4c8fd3350eb27b597af2a Mon Sep 17 00:00:00 2001 From: "Andrew C. Dvorak" Date: Fri, 9 Mar 2018 15:20:51 -0800 Subject: [PATCH 12/12] WIP: Centralize devServer properties --- demos/webpack.config.js | 15 +++++++++++++++ package.json | 2 +- scripts/webpack/js-bundle-factory.js | 6 ------ .../goldens/build-config-dev-env.golden.json | 12 +++++------- .../build/goldens/build-config-no-env.golden.json | 6 ------ .../goldens/build-config-prod-env.golden.json | 6 ------ 6 files changed, 21 insertions(+), 26 deletions(-) diff --git a/demos/webpack.config.js b/demos/webpack.config.js index 9c1a2ed21dd..cba4e8b816b 100644 --- a/demos/webpack.config.js +++ b/demos/webpack.config.js @@ -33,6 +33,8 @@ const copyrightBannerPlugin = pluginFactory.createCopyrightBannerPlugin(); const cssBundleFactory = new CssBundleFactory({env, pathResolver, globber, pluginFactory}); const jsBundleFactory = new JsBundleFactory({env, pathResolver, globber, pluginFactory}); +const DEMO_BASE_DIR_ABSOLUTE_PATH = pathResolver.getAbsolutePath('/demos'); + const OUTPUT = { httpDirAbsolutePath: '/assets/', }; @@ -43,6 +45,19 @@ module.exports = [ demoJs(), ]; +// webpack-dev-server requires that these properties be set on the first bundle. +// It ignores them on all other bundles. +Object.assign(module.exports[0], { + devServer: { + contentBase: DEMO_BASE_DIR_ABSOLUTE_PATH, + + // See https://github.com/webpack/webpack-dev-server/issues/882 + // Because we only spin up dev servers temporarily, and all of our assets are publicly + // available on GitHub, we can safely disable this check. + disableHostCheck: true, + }, +}); + function mainJsCombined() { return jsBundleFactory.createMainJsCombined({output: OUTPUT}); } diff --git a/package.json b/package.json index 5e9b3c439d4..7b14c3a1313 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "clean": "del-cli build/** build .closure-tmp/** .closure-tmp", "commitmsg": "validate-commit-msg", "dist": "npm run build && npm run build:min", - "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --progress --content-base demos --inline --hot --host 0.0.0.0 --config=demos/webpack.config.js", + "dev": "npm run clean && cross-env MDC_ENV=development webpack-dev-server --config=demos/webpack.config.js --progress --inline --hot --host 0.0.0.0", "fix:js": "eslint --fix packages test webpack.config.js demos/webpack.config.js karma.conf.js", "fix:css": "stylelint --fix packages/**/*.scss", "fix": "npm-run-all --parallel fix:*", diff --git a/scripts/webpack/js-bundle-factory.js b/scripts/webpack/js-bundle-factory.js index 1d217e5866f..038e8b6ce10 100644 --- a/scripts/webpack/js-bundle-factory.js +++ b/scripts/webpack/js-bundle-factory.js @@ -68,12 +68,6 @@ class JsBundleFactory { libraryTarget: 'umd', library, }, - // See https://github.com/webpack/webpack-dev-server/issues/882 - // Because we only spin up dev servers temporarily, and all of our assets are publicly - // available on GitHub, we can safely disable this check. - devServer: { - disableHostCheck: true, - }, devtool: 'source-map', module: { rules: [{ diff --git a/test/build/goldens/build-config-dev-env.golden.json b/test/build/goldens/build-config-dev-env.golden.json index a323997c6b8..e3b021d47a6 100644 --- a/test/build/goldens/build-config-dev-env.golden.json +++ b/test/build/goldens/build-config-dev-env.golden.json @@ -8,9 +8,6 @@ "libraryTarget": "umd", "library": "mdc" }, - "devServer": { - "disableHostCheck": true - }, "devtool": "source-map", "module": { "rules": [ @@ -33,7 +30,11 @@ }, "banner": "/*!\n Material Components for the Web\n Copyright (c) 2018 Google Inc.\n License: Apache-2.0\n*/" } - ] + ], + "devServer": { + "contentBase": "/demos", + "disableHostCheck": true + } }, { "name": "demo-css", @@ -145,9 +146,6 @@ "[name]" ] }, - "devServer": { - "disableHostCheck": true - }, "devtool": "source-map", "module": { "rules": [ diff --git a/test/build/goldens/build-config-no-env.golden.json b/test/build/goldens/build-config-no-env.golden.json index a6e5b5ad370..d19266b9192 100644 --- a/test/build/goldens/build-config-no-env.golden.json +++ b/test/build/goldens/build-config-no-env.golden.json @@ -8,9 +8,6 @@ "libraryTarget": "umd", "library": "mdc" }, - "devServer": { - "disableHostCheck": true - }, "devtool": "source-map", "module": { "rules": [ @@ -72,9 +69,6 @@ "[name]" ] }, - "devServer": { - "disableHostCheck": true - }, "devtool": "source-map", "module": { "rules": [ diff --git a/test/build/goldens/build-config-prod-env.golden.json b/test/build/goldens/build-config-prod-env.golden.json index c833071c949..8a6a01cbc80 100644 --- a/test/build/goldens/build-config-prod-env.golden.json +++ b/test/build/goldens/build-config-prod-env.golden.json @@ -8,9 +8,6 @@ "libraryTarget": "umd", "library": "mdc" }, - "devServer": { - "disableHostCheck": true - }, "devtool": "source-map", "module": { "rules": [ @@ -72,9 +69,6 @@ "[name]" ] }, - "devServer": { - "disableHostCheck": true - }, "devtool": "source-map", "module": { "rules": [