Build improvements

- Upgrade to [email protected]
- Add runtime chunk, disable default chunk, and force modules into main
  chunk
- Fix linting issue in the test config
- Fix the generated css file name
- Filter css order warnings
- Move optimize-css-assets-webpack-plugin to dist config

Author: mwistrand

package-lock.json

@@ -146,7 +146,7 @@
     "webpack-dev-middleware": "3.4.0",
     "webpack-hot-middleware": "2.24.3",
     "webpack-manifest-plugin": "2.0.4",
-    "webpack-mild-compile": "2.0.0",
+    "webpack-mild-compile": "3.3.1",
     "webpack-pwa-manifest": "3.7.1",
     "wrapper-webpack-plugin": "2.0.0"
   }

package.json

@@ -16,7 +16,6 @@ const postcssImport = require('postcss-import');
 const IgnorePlugin = require('webpack/lib/IgnorePlugin');
 const slash = require('slash');
 const WrapperPlugin = require('wrapper-webpack-plugin');
-const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 const basePath = process.cwd();
 const srcPath = path.join(basePath, 'src');
@@ -306,6 +305,19 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 			modules: [basePath, path.join(basePath, 'node_modules')],
 			extensions
 		},
+		optimization: {
+			splitChunks: {
+				cacheGroups: {
+					default: false,
+					main: {
+						chunks: 'initial',
+						minChunks: 1,
+						name: 'main',
+						reuseExistingChunk: true
+					}
+				}
+			}
+		},
 		devtool: 'source-map',
 		watchOptions: { ignored: /node_modules/ },
 		plugins: removeEmpty([
@@ -316,13 +328,7 @@ export default function webpackConfigFactory(args: any): webpack.Configuration {
 			new CssModulePlugin(basePath),
 			new IgnorePlugin(/request\/providers\/node/),
 			new MiniCssExtractPlugin({
-				filename: 'main.css'
-			}),
-			new OptimizeCssAssetsPlugin({
-				cssProcessor: require('cssnano'),
-				cssProcessorPluginOptions: {
-					preset: ['default', { calc: false }]
-				}
+				filename: '[name].css'
 			}),
 			(args.externals || isTest) &&
 				new WrapperPlugin({

src/base.config.ts

@@ -11,7 +11,7 @@ function webpackConfig(args: any): webpack.Configuration {
 	const instrumenterOptions = args.legacy ? {} : { esModules: true };
 
 	config.plugins = [
-		...plugins,
+		...plugins!,
 		new WrapperPlugin({
 			test: /(all.*(\.js$))/,
 			footer: `typeof define === 'function' && define.amd && define(['${libraryName}'], function() {});`

src/base.test.config.ts

@@ -26,14 +26,7 @@ function webpackConfig(args: any): webpack.Configuration {
 	if (!args.singleBundle) {
 		config.optimization = {
 			...config.optimization,
-			splitChunks: {
-				cacheGroups: {
-					runtime: {
-						name: 'runtime',
-						chunks: 'initial'
-					}
-				}
-			}
+			runtimeChunk: { name: 'runtime' }
 		};
 	}
 

src/dev.config.ts

@@ -17,6 +17,7 @@ import { WebAppManifest } from './interfaces';
 
 const BrotliPlugin = require('brotli-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const WebpackPwaManifest = require('webpack-pwa-manifest');
 
@@ -40,17 +41,20 @@ function webpackConfig(args: any): webpack.Configuration {
 
 	config.optimization = {
 		...config.optimization,
-		minimizer: [new TerserPlugin({ sourceMap: true, cache: true })]
+		minimizer: [
+			new TerserPlugin({ sourceMap: true, cache: true }),
+			new OptimizeCssAssetsPlugin({
+				cssProcessor: require('cssnano'),
+				cssProcessorPluginOptions: {
+					preset: ['default', { calc: false }]
+				}
+			})
+		]
 	};
 
 	if (!args.singleBundle) {
-		config.optimization.splitChunks = {
-			cacheGroups: {
-				runtime: {
-					name: 'runtime',
-					chunks: 'initial'
-				}
-			}
+		config.optimization.runtimeChunk = {
+			name: 'runtime'
 		};
 	}
 

src/dist.config.ts

@@ -55,7 +55,7 @@ function build(config: webpack.Configuration, args: any) {
 			}
 			if (stats) {
 				const runningMessage = args.serve ? `Listening on port ${args.port}...` : '';
-				const hasErrors = logger(stats.toJson(), config, runningMessage);
+				const hasErrors = logger(stats.toJson({ warningsFilter }), config, runningMessage);
 				if (hasErrors) {
 					reject({});
 					return;
@@ -97,7 +97,7 @@ function fileWatch(config: webpack.Configuration, args: any): Promise<void> {
 			}
 			if (stats) {
 				const runningMessage = args.serve ? `Listening on port ${args.port}` : 'watching...';
-				logger(stats.toJson(), config, runningMessage);
+				logger(stats.toJson({ warningsFilter }), config, runningMessage);
 			}
 			resolve();
 		});
@@ -119,7 +119,7 @@ function memoryWatch(config: webpack.Configuration, args: any, app: express.Appl
 	const compiler = createWatchCompiler(config);
 
 	compiler.hooks.done.tap('@dojo/cli-build-app', (stats) => {
-		logger(stats.toJson(), config, `Listening on port ${args.port}...`);
+		logger(stats.toJson({ warningsFilter }), config, `Listening on port ${args.port}...`);
 	});
 
 	app.use(
@@ -238,6 +238,10 @@ function serve(config: webpack.Configuration, args: any): Promise<void> {
 		});
 }
 
+function warningsFilter(warning: string) {
+	return warning.includes('[mini-css-extract-plugin]\nConflicting order between');
+}
+
 const command: Command = {
 	group: 'build',
 	name: 'app',

src/main.ts

@@ -39,9 +39,7 @@ describe('command', () => {
 		exitStub = stub(process, 'exit');
 		isError = false;
 		stats = {
-			toJson() {
-				return 'stats';
-			}
+			toJson: stub().returns('stats')
 		};
 		mockModule = new MockModule('../../src/main', require);
 		mockModule.dependencies([
@@ -172,6 +170,17 @@ describe('command', () => {
 		});
 	});
 
+	it('filters CSS module order warnings from the logger', () => {
+		const main = mockModule.getModuleUnderTest().default;
+		return main.run(getMockConfiguration(), { mode: 'unit' }).then(() => {
+			const [{ warningsFilter }] = stats.toJson.firstCall.args;
+			assert.isTrue(warningsFilter('[mini-css-extract-plugin]\nConflicting order between'));
+			assert.isFalse(warningsFilter('[mini-css-extract-plugin]'));
+			assert.isFalse(warningsFilter(''));
+			assert.isFalse(warningsFilter('some other warning'));
+		});
+	});
+
 	it('mixes in features from command line', () => {
 		const main = mockModule.getModuleUnderTest().default;
 		return main