Skip to content

Commit

Permalink
chore: Move demo Webpack config to separate file
Browse files Browse the repository at this point in the history
Fixes #1994
  • Loading branch information
acdvorak committed Mar 9, 2018
1 parent 124064b commit b3790ee
Show file tree
Hide file tree
Showing 9 changed files with 107 additions and 95 deletions.
78 changes: 78 additions & 0 deletions demos/webpack.config.js
Original file line number Diff line number Diff line change
@@ -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,
],
});
}
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
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 --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",
Expand Down
17 changes: 12 additions & 5 deletions scripts/webpack/css-bundle-factory.js
Original file line number Diff line number Diff line change
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
6 changes: 3 additions & 3 deletions scripts/webpack/js-bundle-factory.js
Original file line number Diff line number Diff line change
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 Down
6 changes: 0 additions & 6 deletions test/build/goldens/build-config-dev-env.golden.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -73,7 +72,6 @@
"typography": "/demos/typography.scss"
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "[name].css.js"
},
Expand Down Expand Up @@ -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*/",
Expand All @@ -142,7 +137,6 @@
"theme/index": "/demos/theme/index.js"
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "[name].js",
"libraryTarget": "umd",
Expand Down
4 changes: 0 additions & 4 deletions test/build/goldens/build-config-no-env.golden.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -66,7 +65,6 @@
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "mdc.[name].js",
"libraryTarget": "umd",
"library": [
Expand Down Expand Up @@ -108,7 +106,6 @@
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "[name].css.js"
},
"devtool": "source-map",
Expand Down Expand Up @@ -204,7 +201,6 @@
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "[name].css.js"
},
"devtool": "source-map",
Expand Down
4 changes: 0 additions & 4 deletions test/build/goldens/build-config-prod-env.golden.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -66,7 +65,6 @@
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "mdc.[name].min.js",
"libraryTarget": "umd",
"library": [
Expand Down Expand Up @@ -108,7 +106,6 @@
},
"output": {
"path": "/build",
"publicPath": "/assets/",
"filename": "[name].min.css.js"
},
"devtool": "source-map",
Expand Down Expand Up @@ -204,7 +201,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
Original file line number Diff line number Diff line change
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
79 changes: 10 additions & 69 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}),
];

0 comments on commit b3790ee

Please sign in to comment.