Webpack 4 updates

- Replace ExtractTextPlugin with MiniCssExtractPlugin, but pin to 0.4.2 until shellscape/webpack-manifest-plugin#167 is resolved - Remove the style loader as it is no longer needed - Replace removed CommonsChunkPlugin with `optimize.splitChunks` configuration option - Remove plugins provided by `mode` configuration option: NamedChunksPlugin, NamedModulesPlugin, and DefinePlugin
mwistrand · Nov 20, 2018 · 7cb71d2 · 7cb71d2
1 parent 9127eb4
commit 7cb71d2
Show file tree

Hide file tree

Showing 11 changed files with 3,344 additions and 3,379 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -65,7 +65,6 @@
     "@types/copy-webpack-plugin": "4.4.1",
     "@types/execa": "0.8.0",
     "@types/express": "4.11.0",
-    "@types/extract-text-webpack-plugin": "3.0.3",
     "@types/globby": "6.1.0",
     "@types/gzip-size": "4.0.0",
     "@types/html-webpack-plugin": "3.2.0",
@@ -74,6 +73,7 @@
     "@types/loader-utils": "1.1.3",
     "@types/log-symbols": "2.0.0",
     "@types/log-update": "2.0.0",
+    "@types/mini-css-extract-plugin": "0.2.0",
     "@types/mockery": "1.4.29",
     "@types/node": "~9.6.5",
     "@types/ora": "1.3.1",
@@ -100,7 +100,7 @@
     "sinon": "~4.5.0"
   },
   "dependencies": {
-    "@dojo/webpack-contrib": "./deps/dojo-webpack-contrib-4.0.3.tgz",
+    "@dojo/webpack-contrib": "~/projects/dojo/cli-build-app/deps/dojo-webpack-contrib-4.0.3.tgz",
     "brotli-webpack-plugin": "1.0.0",
     "chalk": "2.4.1",
     "clean-webpack-plugin": "1.0.0",
@@ -110,7 +110,6 @@
     "css-loader": "1.0.1",
     "eventsource-polyfill": "0.9.6",
     "express": "4.16.2",
-    "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "2.0.0",
     "globby": "7.1.1",
     "gzip-size": "4.1.0",
@@ -125,6 +124,7 @@
     "loader-utils": "1.1.0",
     "log-symbols": "2.1.0",
     "log-update": "2.3.0",
+    "mini-css-extract-plugin": "0.4.2",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "ora": "1.3.0",
     "pkg-dir": "2.0.0",
@@ -134,7 +134,6 @@
     "slash": "1.0.0",
     "source-map-loader-cli": "0.0.1",
     "strip-ansi": "3.0.1",
-    "style-loader": "0.23.1",
     "ts-loader": "5.3.0",
     "ts-node": "7.0.1",
     "tslint": "5.8.0",

diff --git a/src/base.config.ts b/src/base.config.ts
@@ -1,16 +1,15 @@
-import * as webpack from 'webpack';
-import * as path from 'path';
-import { readFileSync, existsSync } from 'fs';
 import CssModulePlugin from '@dojo/webpack-contrib/css-module-plugin/CssModulePlugin';
 import ExternalLoaderPlugin from '@dojo/webpack-contrib/external-loader-plugin/ExternalLoaderPlugin';
-import registryTransformer from '@dojo/webpack-contrib/registry-transformer';
 import I18nPlugin from '@dojo/webpack-contrib/i18n-plugin/I18nPlugin';
-import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
-import { WebpackConfiguration } from './interfaces';
+import registryTransformer from '@dojo/webpack-contrib/registry-transformer';
+import getFeatures from '@dojo/webpack-contrib/static-build-loader/getFeatures';
+import { readFileSync, existsSync } from 'fs';
 import * as loaderUtils from 'loader-utils';
-import * as ts from 'typescript';
+import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import * as path from 'path';
 import * as tsnode from 'ts-node';
-import getFeatures from '@dojo/webpack-contrib/static-build-loader/getFeatures';
+import * as ts from 'typescript';
+import * as webpack from 'webpack';
 
 const postcssPresetEnv = require('postcss-preset-env');
 const postcssImport = require('postcss-import');
@@ -75,11 +74,8 @@ function getLocalIdent(
 	options: any
 ) {
 	if (!options.context) {
-		if (loaderContext.options && typeof loaderContext.options.context === 'string') {
-			options.context = loaderContext.options.context;
-		} else {
-			options.context = loaderContext.context;
-		}
+		const { context, rootContext } = loaderContext;
+		options.context = typeof rootContext === 'string' ? rootContext : context;
 	}
 	const request = slash(path.relative(options.context, loaderContext.resourcePath));
 	options.content = `${options.hashPrefix}${request}+${localName}`;
@@ -150,7 +146,7 @@ function loadRoutingOutlets() {
 	return outlets;
 }
 
-export default function webpackConfigFactory(args: any): WebpackConfiguration {
+export default function webpackConfigFactory(args: any): webpack.Configuration {
 	const extensions = args.legacy ? ['.ts', '.tsx', '.js'] : ['.ts', '.tsx', '.mjs', '.js'];
 	const compilerOptions = args.legacy ? {} : { target: 'es6', module: 'esnext' };
 	let features = args.legacy ? args.features : { ...(args.features || {}), ...getFeatures('chrome') };
@@ -223,50 +219,48 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 		}
 	};
 
-	const postCssModuleLoader = ExtractTextPlugin.extract({
-		fallback: ['style-loader'],
-		use: [
-			'@dojo/webpack-contrib/css-module-decorator-loader',
-			{
-				loader: 'css-loader',
-				options: {
-					modules: true,
-					sourceMap: true,
-					importLoaders: 1,
-					localIdentName: '[name]__[local]__[hash:base64:5]',
-					getLocalIdent
-				}
-			},
-			{
-				loader: 'postcss-loader?sourceMap',
-				options: {
-					ident: 'postcss',
-					plugins: [postcssImport(postcssImportConfig), postcssPresetEnv(postcssPresetConfig)]
-				}
+	const postCssModuleLoader = [
+		MiniCssExtractPlugin.loader,
+		'@dojo/webpack-contrib/css-module-decorator-loader',
+		{
+			loader: 'css-loader',
+			options: {
+				modules: true,
+				sourceMap: true,
+				importLoaders: 1,
+				localIdentName: '[name]__[local]__[hash:base64:5]',
+				getLocalIdent
 			}
-		]
-	});
-	const cssLoader = ExtractTextPlugin.extract({
-		fallback: ['style-loader'],
-		use: [
-			{
-				loader: 'css-loader',
-				options: {
-					sourceMap: true,
-					importLoaders: 1
-				}
-			},
-			{
-				loader: 'postcss-loader?sourceMap',
-				options: {
-					ident: 'postcss',
-					plugins: [postcssImport(postcssImportConfig), postcssPresetEnv(postcssPresetConfig)]
-				}
+		},
+		{
+			loader: 'postcss-loader?sourceMap',
+			options: {
+				ident: 'postcss',
+				plugins: [postcssImport(postcssImportConfig), postcssPresetEnv(postcssPresetConfig)]
 			}
-		]
-	});
+		}
+	];
+
+	const cssLoader = [
+		MiniCssExtractPlugin.loader,
+		{
+			loader: 'css-loader',
+			options: {
+				sourceMap: true,
+				importLoaders: 1
+			}
+		},
+		{
+			loader: 'postcss-loader?sourceMap',
+			options: {
+				ident: 'postcss',
+				plugins: [postcssImport(postcssImportConfig), postcssPresetEnv(postcssPresetConfig)]
+			}
+		}
+	];
 
 	const config: webpack.Configuration = {
+		mode: 'development',
 		externals: [
 			function(context, request, callback) {
 				const externals = (args.externals && args.externals.dependencies) || [];
@@ -321,18 +315,15 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 				}),
 			new CssModulePlugin(basePath),
 			new IgnorePlugin(/request\/providers\/node/),
-			new ExtractTextPlugin({
-				filename: 'main.css',
-				allChunks: true
+			new MiniCssExtractPlugin({
+				filename: 'main.css'
 			}),
 			new OptimizeCssAssetsPlugin({
 				cssProcessor: require('cssnano'),
 				cssProcessorPluginOptions: {
 					preset: ['default', { calc: false }]
 				}
 			}),
-			new webpack.NamedChunksPlugin(),
-			new webpack.NamedModulesPlugin(),
 			(args.externals || isTest) &&
 				new WrapperPlugin({
 					test: /(main.*(\.js$))/,
@@ -413,6 +404,10 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 				},
 				{
 					test: /\.mjs?$/,
+					// We cannot trust that all `mjs` modules use the correct import format for all dependencies
+					// (e.g., do not use `import from` for cjs modules). Setting the type to `javascript/auto` allows
+					// incorrect imports to continue working.
+					type: 'javascript/auto',
 					use: removeEmpty([
 						features && {
 							loader: '@dojo/webpack-contrib/static-build-loader',
@@ -455,16 +450,16 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 							!/.*(\/|\\)node_modules(\/|\\)@dojo(\/|\\)widgets(\/|\\).*/.test(path)
 						);
 					},
-					use: ExtractTextPlugin.extract({
-						fallback: ['style-loader'],
-						use: {
+					use: [
+						MiniCssExtractPlugin.loader,
+						{
 							loader: 'css-loader',
 							options: {
 								sourceMap: true,
 								importLoaders: 1
 							}
 						}
-					})
+					]
 				},
 				{
 					include: allPaths,
@@ -481,5 +476,5 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 		}
 	};
 
-	return config as WebpackConfiguration;
+	return config as webpack.Configuration;
 }
diff --git a/src/base.test.config.ts b/src/base.test.config.ts
@@ -1,54 +1,54 @@
+import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import * as webpack from 'webpack';
 import baseConfigFactory, { libraryName } from './base.config';
-import { WebpackConfiguration } from './interfaces';
-import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
 
 const WrapperPlugin = require('wrapper-webpack-plugin');
 
-function webpackConfig(args: any): WebpackConfiguration {
+function webpackConfig(args: any): webpack.Configuration {
 	const config = baseConfigFactory(args);
 	const { plugins, module } = config;
 	const externals: any[] = (config.externals as any[]) || [];
 
 	const instrumenterOptions = args.legacy ? {} : { esModules: true };
 
 	config.plugins = [
-		...plugins.map((plugin) => {
-			if (plugin instanceof ExtractTextPlugin && (plugin as any).filename === 'main.css') {
-				(plugin as any).options = { ...(plugin as any).options, disable: true };
-			}
-			return plugin;
+		...plugins!.filter((plugin) => {
+			return !(plugin instanceof MiniCssExtractPlugin) || (plugin as any).options.filename !== 'main.css';
 		}),
 		new WrapperPlugin({
 			test: /(all.*(\.js$))/,
 			footer: `typeof define === 'function' && define.amd && define(['${libraryName}'], function() {});`
 		})
 	];
 
-	module.rules = module.rules.map((rule) => {
-		if (Array.isArray(rule.use)) {
-			rule.use = rule.use.map((loader) => {
-				if (typeof loader === 'string') {
+	if (module) {
+		module.rules = module.rules.map((rule) => {
+			if (Array.isArray(rule.use)) {
+				rule.use = rule.use.map((loader) => {
+					if (typeof loader === 'string') {
+						return loader;
+					}
+					const { loader: loaderName } = loader as webpack.RuleSetLoader;
+					if (loaderName === 'umd-compat-loader') {
+						return {
+							loader: loaderName,
+							options: {}
+						};
+					}
 					return loader;
-				}
-				if (loader.loader === 'umd-compat-loader') {
-					return {
-						loader: loader.loader,
-						options: {}
-					};
-				}
-				return loader;
-			});
-		}
-		return rule;
-	});
-	module.rules.push({
-		test: /src[\\\/].*\.ts(x)?$/,
-		use: {
-			loader: 'istanbul-instrumenter-loader',
-			options: instrumenterOptions
-		},
-		enforce: 'post'
-	});
+				});
+			}
+			return rule;
+		});
+		module.rules.push({
+			test: /src[\\\/].*\.ts(x)?$/,
+			use: {
+				loader: 'istanbul-instrumenter-loader',
+				options: instrumenterOptions
+			},
+			enforce: 'post'
+		});
+	}
 
 	externals.push(/^intern/);
 	config.externals = externals;