Feat: Drop webpack 3 support (#1023)

BREAKING CHANGE: webpack 3 is no longer supported, webpack 4 is the minimum required version
styleguidist · Oct 18, 2018 · 621c2c6 · 621c2c6
1 parent 608c582
commit 621c2c6
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 58 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -5,7 +5,6 @@ node_js:
   - 6
 env:
   - WEBPACK_VERSION= # Current, from package.json
-  - WEBPACK_VERSION=3
 install:
   # Use npm 5.7.x since it has introduced `npm ci`
   - if [[ `npm -v` != 5.7* ]]; then npm install -g npm@'>=5.7.1'; fi

diff --git a/package-lock.json b/package-lock.json
diff --git a/scripts/__tests__/make-webpack-config.spec.js b/scripts/__tests__/make-webpack-config.spec.js
@@ -1,7 +1,12 @@
 import webpack, { validate } from 'webpack';
-import getWebpackVersion from '../utils/getWebpackVersion';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
 import makeWebpackConfig from '../make-webpack-config';
 
+jest.mock('copy-webpack-plugin', () => {
+	const RealCopyWebpackPluginModule = require.requireActual('copy-webpack-plugin');
+	return jest.fn(RealCopyWebpackPluginModule);
+});
+
 const theme = 'hl-theme';
 const styleguideConfig = {
 	styleguideDir: __dirname,
@@ -16,7 +21,10 @@ const getClasses = (plugins, name) => plugins.filter(x => x.constructor.name ===
 const getClassNames = plugins => plugins.map(x => x.constructor.name);
 
 const process$env$nodeEnv = process.env.NODE_ENV;
-const isWebpack4 = getWebpackVersion() >= 4;
+
+beforeEach(() => {
+	CopyWebpackPlugin.mockClear();
+});
 
 afterEach(() => {
 	process.env.NODE_ENV = process$env$nodeEnv;
@@ -32,14 +40,10 @@ it('should return a development config', () => {
 	const plugins = getClassNames(config.plugins);
 	expect(plugins).toContain('HotModuleReplacementPlugin');
 
-	if (isWebpack4) {
-		expect(config).toMatchObject({
-			mode: env,
-		});
-		expect(config).not.toHaveProperty('optimization');
-	} else {
-		expect(plugins).not.toContain('UglifyJsPlugin');
-	}
+	expect(config).toMatchObject({
+		mode: env,
+	});
+	expect(config).not.toHaveProperty('optimization');
 });
 
 it('should return a production config', () => {
@@ -59,14 +63,10 @@ it('should return a production config', () => {
 		},
 	});
 
-	if (isWebpack4) {
-		expect(config).toMatchObject({
-			mode: env,
-		});
-		expect(getClasses(config.optimization.minimizer, 'UglifyJsPlugin')).toHaveLength(1);
-	} else {
-		expect(plugins).toContain('UglifyJsPlugin');
-	}
+	expect(config).toMatchObject({
+		mode: env,
+	});
+	expect(getClasses(config.optimization.minimizer, 'UglifyJsPlugin')).toHaveLength(1);
 });
 
 it('should set aliases', () => {
@@ -102,6 +102,16 @@ it('should enable verbose mode in CleanWebpackPlugin', () => {
 	expect(getClasses(result.plugins, 'CleanWebpackPlugin')).toMatchSnapshot();
 });
 
+it('should set from with assetsDir in CopyWebpackPlugin', () => {
+	makeWebpackConfig({ ...styleguideConfig, assetsDir: '/assets/' }, 'production');
+	expect(CopyWebpackPlugin).toHaveBeenCalledWith([{ from: '/assets/' }]); //([
+});
+
+it('should add CopyWebpackPlugin to plugins in production', () => {
+	makeWebpackConfig({ ...styleguideConfig }, 'production');
+	expect(CopyWebpackPlugin).toHaveBeenCalledWith([]);
+});
+
 it('should merge user webpack config', () => {
 	const result = makeWebpackConfig(
 		{ ...styleguideConfig, webpackConfig: { resolve: { alias: { foo: 'bar' } } } },

diff --git a/scripts/make-webpack-config.js b/scripts/make-webpack-config.js
@@ -10,11 +10,9 @@ const forEach = require('lodash/forEach');
 const isFunction = require('lodash/isFunction');
 const mergeWebpackConfig = require('./utils/mergeWebpackConfig');
 const StyleguidistOptionsPlugin = require('./utils/StyleguidistOptionsPlugin');
-const getWebpackVersion = require('./utils/getWebpackVersion');
 
 const RENDERER_REGEXP = /Renderer$/;
 
-const isWebpack4 = getWebpackVersion() >= 4;
 const sourceDir = path.resolve(__dirname, '../lib');
 
 module.exports = function(config, env) {
@@ -35,6 +33,7 @@ module.exports = function(config, env) {
 
 	let webpackConfig = {
 		entry: config.require.concat([path.resolve(sourceDir, 'index')]),
+		mode: env,
 		output: {
 			path: config.styleguideDir,
 			filename: 'build/[name].bundle.js',
@@ -59,34 +58,7 @@ module.exports = function(config, env) {
 		},
 	};
 
-	/* istanbul ignore if */
-	if (isWebpack4) {
-		webpackConfig.mode = env;
-	}
-
 	if (isProd) {
-		webpackConfig = merge(webpackConfig, {
-			output: {
-				filename: 'build/bundle.[chunkhash:8].js',
-				chunkFilename: 'build/[name].[chunkhash:8].js',
-			},
-			plugins: [
-				new CleanWebpackPlugin(['build'], {
-					root: config.styleguideDir,
-					verbose: config.verbose === true,
-				}),
-				new CopyWebpackPlugin(
-					config.assetsDir
-						? [
-								{
-									from: config.assetsDir,
-								},
-						  ]
-						: []
-				),
-			],
-		});
-
 		const uglifier = new UglifyJSPlugin({
 			parallel: true,
 			cache: true,
@@ -110,15 +82,30 @@ module.exports = function(config, env) {
 				},
 			},
 		});
-
-		/* istanbul ignore if */
-		if (isWebpack4) {
-			webpackConfig.optimization = {
+		webpackConfig = merge(webpackConfig, {
+			output: {
+				filename: 'build/bundle.[chunkhash:8].js',
+				chunkFilename: 'build/[name].[chunkhash:8].js',
+			},
+			plugins: [
+				new CleanWebpackPlugin(['build'], {
+					root: config.styleguideDir,
+					verbose: config.verbose === true,
+				}),
+				new CopyWebpackPlugin(
+					config.assetsDir
+						? [
+								{
+									from: config.assetsDir,
+								},
+						  ]
+						: []
+				),
+			],
+			optimization: {
 				minimizer: [uglifier],
-			};
-		} else {
-			webpackConfig.plugins.unshift(uglifier);
-		}
+			},
+		});
 	} else {
 		webpackConfig = merge(webpackConfig, {
 			entry: [require.resolve('react-dev-utils/webpackHotDevClient')],

diff --git a/scripts/utils/ensureWebpack.js b/scripts/utils/ensureWebpack.js
@@ -7,7 +7,7 @@ const getWebpackVersion = require('./getWebpackVersion');
 const StyleguidistError = require('./error');
 const consts = require('../consts');
 
-const MIN_WEBPACK_VERSION = 2;
+const MIN_WEBPACK_VERSION = 4;
 const webpackVersion = getWebpackVersion();
 
 if (!webpackVersion) {