Build tools: Upgrade webpack to version 4.

* Minification is done by uglify, so disable that in the media build.
* The webpack boilerplate has changed, which explains the changes in the build files.
* ModuleConcatenationPlugin is enable by default for production builds so we don't have to specify that ourselves.

Merge notes: In `trunk` uglify isn't run on the media files after webpack, so webpack does need to do that. Newer webpack versions use `terser-webpack-plugin` as the default minification. Use the `uglifyjs-webpack-plugin` plugin to maintain the same behavior as before. We can look into terser as a minifier later.

Merges [43688] to trunk.
See #45065.


git-svn-id: https://develop.svn.wordpress.org/trunk@44111 602fd350-edb4-49c9-b593-d223f7449a82

package.json

@@ -37,12 +37,13 @@
 		"grunt-replace": "~1.0.1",
 		"grunt-rtlcss": "~2.0.1",
 		"grunt-sass": "~2.0.0",
-		"grunt-webpack": "^3.0.2",
+		"grunt-webpack": "^3.1.3",
 		"ink-docstrap": "^1.3.0",
 		"jquery-migrate": "1.4.1",
 		"matchdep": "~2.0.0",
-		"webpack": "^3.6.0",
+		"uglifyjs-webpack-plugin": "^2.0.1",
-		"webpack-dev-server": "^2.9.1"
+		"webpack": "^4.20.2",
+		"webpack-dev-server": "^3.1.9"
 	},
 	"dependencies": {
 		"backbone": "1.3.3",

webpack.config.js

@@ -1,3 +1,5 @@
+const UglifyJsPlugin = require( 'uglifyjs-webpack-plugin' );
+
 var path        	= require( 'path' ),
 	webpack       	= require( 'webpack' ),
 	admin_files   	= {},
@@ -18,22 +20,22 @@ module.exports = function( env = { environment: "production" } ) {
 	const mode = env.environment;
 
 	const mediaConfig = {
+		mode,
 		cache: true,
 		entry: Object.assign( admin_files, include_files ),
 		output: {
+			path: path.resolve( __dirname ),
 			filename: '[name]',
 		},
-		plugins: [
+		optimization: {
-			new webpack.optimize.UglifyJsPlugin({
+			minimize: true,
-				include: /\.min\.js$/,
+			minimizer: [
-				minimize: true
+				new UglifyJsPlugin( {
-			})
+					include: /\.min\.js$/,
-		]
+				} )
+			]
+		},
 	};
 
-	if ( mode === 'production' ) {
-		mediaConfig.plugins.push( new webpack.optimize.ModuleConcatenationPlugin() );
-	}
-
 	return mediaConfig;
 };