Upgrade webpack v4

package.json

@@ -49,30 +49,30 @@
   "devDependencies": {
     "@dojo/cli": "^4.0.0",
     "@dojo/scripts": "~3.0.1",
-    "@types/clean-webpack-plugin": "0.1.0",
+    "@types/clean-webpack-plugin": "0.1.2",
     "@types/execa": "0.8.0",
     "@types/express": "4.11.0",
-    "@types/extract-text-webpack-plugin": "3.0.0",
     "@types/globby": "6.1.0",
     "@types/gzip-size": "4.0.0",
-    "@types/html-webpack-plugin": "2.30.1",
+    "@types/html-webpack-plugin": "3.2.0",
     "@types/jsonfile": "4.0.1",
-    "@types/loader-utils": "1.1.0",
+    "@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/optimize-css-assets-webpack-plugin": "1.3.1",
-    "@types/ora": "^1.3.1",
+    "@types/ora": "1.3.1",
     "@types/rimraf": "2.0.2",
     "@types/sinon": "~4.3.3",
     "@types/strip-ansi": "3.0.0",
-    "@types/tapable": "0.2.4",
-    "@types/webpack": "3.8.1",
-    "@types/webpack-chunk-hash": "0.4.0",
-    "@types/yargs": "^10.0.0",
-    "cpx": "~1.5.0",
+    "@types/tapable": "1.0.4",
+    "@types/webpack": "4.4.19",
+    "@types/webpack-chunk-hash": "0.4.2",
+    "@types/yargs": "10.0.0",
     "codecov": "~3.0.4",
+    "cpx": "~1.5.0",
     "execa": "0.8.0",
     "husky": "^0.14.3",
     "lint-staged": "6.0.0",
@@ -86,45 +86,43 @@
   },
   "dependencies": {
     "@dojo/framework": "^4.0.0",
-    "@dojo/webpack-contrib": "^4.0.0",
+    "@dojo/webpack-contrib": "next",
     "chalk": "2.4.1",
-    "clean-webpack-plugin": "0.1.17",
+    "clean-webpack-plugin": "1.0.0",
     "cli-columns": "3.1.2",
-    "css-loader": "0.28.7",
+    "css-loader": "1.0.1",
     "express": "4.16.2",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.5",
+    "file-loader": "2.0.0",
     "globby": "7.1.1",
     "gzip-size": "4.1.0",
     "html-webpack-plugin": "3.2.0",
-    "imports-loader": "0.7.1",
+    "imports-loader": "0.8.0",
     "istanbul-instrumenter-loader": "3.0.1",
     "json-css-module-loader": "1.0.2",
     "jsonfile": "4.0.0",
     "loader-utils": "1.1.0",
     "log-symbols": "2.1.0",
     "log-update": "2.3.0",
-    "optimize-css-assets-webpack-plugin": "3.2.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",
-    "postcss-import": "11.0.0",
-    "postcss-loader": "2.0.8",
+    "postcss-import": "12.0.0",
+    "postcss-loader": "3.0.0",
     "postcss-preset-env": "5.3.0",
     "slash": "1.0.0",
     "source-map-loader-cli": "0.0.1",
     "strip-ansi": "4.0.0",
-    "style-loader": "0.19.0",
-    "ts-loader": "3.1.1",
+    "terser-webpack-plugin": "1.1.0",
+    "ts-loader": "5.3.0",
     "tslint": "5.8.0",
-    "tslint-loader": "3.5.3",
+    "tslint-loader": "3.5.4",
     "typed-css-modules": "0.3.1",
-    "uglifyjs-webpack-plugin": "1.1.0",
     "umd-compat-loader": "2.1.1",
-    "webpack": "3.8.1",
-    "webpack-bundle-analyzer-sunburst": "1.3.0",
-    "webpack-chunk-hash": "0.5.0",
-    "webpack-dev-middleware": "2.0.3",
-    "webpack-hot-middleware": "2.21.0",
-    "webpack-mild-compile": "1.0.0"
+    "webpack": "4.25.1",
+    "webpack-chunk-hash": "0.6.0",
+    "webpack-dev-middleware": "3.4.0",
+    "webpack-hot-middleware": "2.24.3",
+    "webpack-mild-compile": "3.3.1"
   }
 }

src/base.config.ts

@@ -1,14 +1,13 @@
-import * as webpack from 'webpack';
-import * as path from 'path';
-import { existsSync } from 'fs';
 import CssModulePlugin from '@dojo/webpack-contrib/css-module-plugin/CssModulePlugin';
-import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
-import { WebpackConfiguration } from './interfaces';
+import { existsSync } from 'fs';
 import * as loaderUtils from 'loader-utils';
+import * as MiniCssExtractPlugin from 'mini-css-extract-plugin';
+import * as path from 'path';
+import * as webpack from 'webpack';
 
 const postcssPresetEnv = require('postcss-preset-env');
-const IgnorePlugin = require('webpack/lib/IgnorePlugin');
 const slash = require('slash');
+const IgnorePlugin = require('webpack/lib/IgnorePlugin');
 
 const basePath = process.cwd();
 const srcPath = path.join(basePath, 'src');
@@ -56,11 +55,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}`;
@@ -87,7 +83,7 @@ function colorToColorMod(style: CssStyle) {
 	});
 }
 
-export default function webpackConfigFactory(args: any): WebpackConfiguration {
+export default function webpackConfigFactory(args: any): webpack.Configuration {
 	const elements = args.element ? [args.element] : args.elements;
 	const jsonpIdent = args.element ? args.element.name : 'custom-elements';
 	const extensions = args.legacy ? ['.ts', '.tsx', '.js'] : ['.ts', '.tsx', '.mjs', '.js'];
@@ -109,6 +105,7 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 	};
 
 	const config: webpack.Configuration = {
+		mode: 'development',
 		entry: elements.reduce((entry: any, element: any) => {
 			entry[element.name] = [
 				`imports-loader?widgetFactory=${element.path}!${path.join(__dirname, 'template', 'custom-element.js')}`
@@ -121,23 +118,39 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 			filename: `[name]-${packageJson.version}.js`,
 			jsonpFunction: getJsonpFunctionName(`-${packageName}-${jsonpIdent}`),
 			libraryTarget: 'jsonp',
-			path: path.resolve('./output')
+			path: path.resolve('./output'),
+			pathinfo: false
 		},
 		resolve: {
 			modules: [basePath, path.join(basePath, 'node_modules')],
 			extensions
 		},
-		devtool: 'source-map',
+		optimization: {
+			splitChunks: {
+				cacheGroups: elements.reduce((groups: { [key: string]: webpack.Options.CacheGroupsOptions }, element: any) => {
+					function recursiveIssuer(m: any): string | boolean {
+						return m.issuer ? recursiveIssuer(m.issuer) : m.name ? m.name : false;
+					}
+					groups[`${element.name}Styles`] = {
+						name: element.name,
+						test: (m: any, c: any, entry = element.name) =>
+							m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
+						chunks: 'all',
+						enforce: true
+					};
+					return groups;
+				}, {})
+			}
+		},
 		watchOptions: { ignored: /node_modules/ },
 		plugins: removeEmpty([
 			new CssModulePlugin(basePath),
 			new webpack.BannerPlugin(banner),
 			new IgnorePlugin(/request\/providers\/node/),
-			new ExtractTextPlugin({
-				filename: (getPath: any) => getPath(`[name]-${packageJson.version}.css`)
-			} as any),
-			new webpack.NamedChunksPlugin(),
-			new webpack.NamedModulesPlugin()
+			new MiniCssExtractPlugin({
+				filename: `[name]-${packageJson.version}.css`,
+				sourceMap: true
+			} as any)
 		]),
 		module: {
 			rules: removeEmpty([
@@ -181,6 +194,10 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 					])
 				},
 				{
+					// 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',
 					test: /\.mjs$/,
 					use: removeEmpty([
 						{
@@ -212,10 +229,7 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 				{
 					test: /\.css$/,
 					exclude: allPaths,
-					use: ExtractTextPlugin.extract({
-						fallback: ['style-loader'],
-						use: ['css-loader?sourceMap']
-					})
+					use: [MiniCssExtractPlugin.loader, 'css-loader?sourceMap']
 				},
 				{
 					test: /\.m\.css.js$/,
@@ -225,33 +239,31 @@ export default function webpackConfigFactory(args: any): WebpackConfiguration {
 				{
 					include: allPaths,
 					test: /.*\.css?$/,
-					use: 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: [require('postcss-import')(), postcssPresetEnv(postcssPresetConfig)]
-								}
+					use: [
+						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
 							}
-						]
-					})
+						},
+						{
+							loader: 'postcss-loader?sourceMap',
+							options: {
+								ident: 'postcss',
+								plugins: [require('postcss-import')(), postcssPresetEnv(postcssPresetConfig)]
+							}
+						}
+					]
 				}
 			])
 		}
 	};
 
-	return config as WebpackConfiguration;
+	return config;
 }

src/dev.config.ts

@@ -1,18 +1,19 @@
 import baseConfigFactory from './base.config';
 import * as path from 'path';
-import webpack = require('webpack');
+import * as webpack from 'webpack';
 import * as CleanWebpackPlugin from 'clean-webpack-plugin';
 
 function webpackConfig(args: any): webpack.Configuration {
 	const config = baseConfigFactory(args);
 	const { plugins, output } = config;
 	const location = path.join('dev', args.element.name);
+	const outputPath = output!.path as string;
 
-	config.plugins = [...plugins, new CleanWebpackPlugin([location], { root: output.path, verbose: false })];
+	config.plugins = [...plugins!, new CleanWebpackPlugin([location], { root: outputPath, verbose: false })];
 
 	config.output = {
 		...output,
-		path: path.join(output.path!, location)
+		path: path.join(outputPath, location)
 	};
 
 	config.devtool = 'inline-source-map';

src/dist.config.ts

@@ -1,55 +1,50 @@
+import BundleAnalyzerPlugin from '@dojo/webpack-contrib/webpack-bundle-analyzer/BundleAnalyzerPlugin';
 import baseConfigFactory from './base.config';
 import webpack = require('webpack');
 import * as path from 'path';
-import * as ExtractTextPlugin from 'extract-text-webpack-plugin';
 import * as CleanWebpackPlugin from 'clean-webpack-plugin';
 import * as WebpackChunkHash from 'webpack-chunk-hash';
-import { existsSync } from 'fs';
 
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer-sunburst').BundleAnalyzerPlugin;
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-
-const packageJsonPath = path.join(process.cwd(), 'package.json');
-const packageJson = existsSync(packageJsonPath) ? require(packageJsonPath) : {};
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 function webpackConfig(args: any): webpack.Configuration {
 	const config = baseConfigFactory(args);
 	const { plugins, output } = config;
 	const location = path.join('dist', args.element.name);
+	const outputPath = output!.path as string;
+
+	config.mode = 'production';
+
+	config.optimization = {
+		...config.optimization,
+		minimizer: [
+			new TerserPlugin({ sourceMap: true, cache: true }),
+			new OptimizeCssAssetsPlugin({
+				cssProcessor: require('cssnano'),
+				cssProcessorPluginOptions: {
+					preset: ['default', { calc: false }]
+				}
+			})
+		]
+	};
 
 	config.plugins = [
-		...plugins,
+		...plugins!,
 		new BundleAnalyzerPlugin({
 			analyzerMode: 'static',
 			openAnalyzer: false,
-			reportType: 'sunburst',
 			generateStatsFile: true,
-			reportFilename: path.join('..', '..', 'info', args.element.name, 'report.html'),
-			statsFilename: path.join('..', '..', 'info', args.element.name, 'stats.json')
+			reportFilename: '../info/report.html',
+			statsFilename: '../info/stats.json'
 		}),
-		new UglifyJsPlugin({ sourceMap: true, cache: true }),
 		new WebpackChunkHash(),
-		new CleanWebpackPlugin([location], { root: output.path, verbose: false }),
-		new webpack.DefinePlugin({
-			'process.env': {
-				NODE_ENV: '"production"'
-			}
-		})
+		new CleanWebpackPlugin([location], { root: outputPath, verbose: false })
 	];
 
-	config.plugins = config.plugins.map(plugin => {
-		if (plugin instanceof ExtractTextPlugin) {
-			return new ExtractTextPlugin({
-				filename: `[name]-${packageJson.version}.css`,
-				allChunks: true
-			});
-		}
-		return plugin;
-	});
-
 	config.output = {
 		...output,
-		path: path.join(output.path!, location)
+		path: path.join(outputPath, location)
 	};
 
 	return config;