Skip to content

Commit

Permalink
chore: Move demo Webpack config to separate file (#2325)
Browse files Browse the repository at this point in the history
Fixes #1994
  • Loading branch information
acdvorak committed Mar 9, 2018
1 parent 8b799a5 commit 4c7f006
Show file tree
Hide file tree
Showing 9 changed files with 123 additions and 121 deletions.
93 changes: 93 additions & 0 deletions demos/webpack.config.js
@@ -0,0 +1,93 @@
/**
* 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 DEMO_BASE_DIR_ABSOLUTE_PATH = pathResolver.getAbsolutePath('/demos');

const OUTPUT = {
httpDirAbsolutePath: '/assets/',
};

module.exports = [
mainJsCombined(),
demoCss(),
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});
}

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,
],
});
}
6 changes: 3 additions & 3 deletions package.json
Expand Up @@ -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 --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:*",
"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",
Expand Down
17 changes: 12 additions & 5 deletions scripts/webpack/css-bundle-factory.js
Expand Up @@ -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 {
Expand All @@ -81,9 +90,7 @@ module.exports = class {
},
plugins: [
cssExtractorPlugin,
this.pluginFactory_.createCssCleanupPlugin({
cleanupDirRelativePath: fsDirAbsolutePath,
}),
...fsCleanupPlugins,
...plugins,
],
};
Expand Down
12 changes: 3 additions & 9 deletions scripts/webpack/js-bundle-factory.js
Expand Up @@ -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,
},
Expand All @@ -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: [{
Expand Down
18 changes: 5 additions & 13 deletions test/build/goldens/build-config-dev-env.golden.json
Expand Up @@ -3,15 +3,11 @@
"name": "main-js-combined",
"entry": "/packages/material-components-web/index.js",
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "material-components-web.js",
"libraryTarget": "umd",
"library": "mdc"
},
"devServer": {
"disableHostCheck": true
},
"devtool": "source-map",
"module": {
"rules": [
Expand All @@ -34,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",
Expand Down Expand Up @@ -73,7 +73,6 @@
"typography": "/demos/typography.scss"
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "[name].css.js"
},
Expand Down Expand Up @@ -122,9 +121,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*/",
Expand All @@ -142,7 +138,6 @@
"theme/index": "/demos/theme/index.js"
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "[name].js",
"libraryTarget": "umd",
Expand All @@ -151,9 +146,6 @@
"[name]"
]
},
"devServer": {
"disableHostCheck": true
},
"devtool": "source-map",
"module": {
"rules": [
Expand Down
10 changes: 0 additions & 10 deletions test/build/goldens/build-config-no-env.golden.json
Expand Up @@ -4,14 +4,10 @@
"entry": "/packages/material-components-web/index.js",
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "material-components-web.js",
"libraryTarget": "umd",
"library": "mdc"
},
"devServer": {
"disableHostCheck": true
},
"devtool": "source-map",
"module": {
"rules": [
Expand Down Expand Up @@ -66,17 +62,13 @@
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "mdc.[name].js",
"libraryTarget": "umd",
"library": [
"mdc",
"[name]"
]
},
"devServer": {
"disableHostCheck": true
},
"devtool": "source-map",
"module": {
"rules": [
Expand Down Expand Up @@ -108,7 +100,6 @@
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "[name].css.js"
},
"devtool": "source-map",
Expand Down Expand Up @@ -204,7 +195,6 @@
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "[name].css.js"
},
"devtool": "source-map",
Expand Down
10 changes: 0 additions & 10 deletions test/build/goldens/build-config-prod-env.golden.json
Expand Up @@ -4,14 +4,10 @@
"entry": "/packages/material-components-web/index.js",
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "material-components-web.min.js",
"libraryTarget": "umd",
"library": "mdc"
},
"devServer": {
"disableHostCheck": true
},
"devtool": "source-map",
"module": {
"rules": [
Expand Down Expand Up @@ -66,17 +62,13 @@
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "mdc.[name].min.js",
"libraryTarget": "umd",
"library": [
"mdc",
"[name]"
]
},
"devServer": {
"disableHostCheck": true
},
"devtool": "source-map",
"module": {
"rules": [
Expand Down Expand Up @@ -108,7 +100,6 @@
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "[name].min.css.js"
},
"devtool": "source-map",
Expand Down Expand Up @@ -204,7 +195,6 @@
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "[name].min.css.js"
},
"devtool": "source-map",
Expand Down
2 changes: 1 addition & 1 deletion test/build/webpack-module-exports.test.js
Expand Up @@ -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',
});
Expand Down

0 comments on commit 4c7f006

Please sign in to comment.