Ticket #40894: 40894.4.diff

.jshintrc

@@ -21 +21 @@
     "Backbone": false,
     "jQuery": false,
     "JSON": false,
-    "wp": false
+    "wp": false,
+    "export": false,
+    "module": false,
+    "require": false
   }
 }

Gruntfile.js

@@ -1 +1 @@
 /* jshint node:true */
+var webpackConfig = require( './webpack.config' );
+var webpackDevConfig = require( './webpack-dev.config' );
+
 module.exports = function(grunt) {
         var path = require('path'),
                 fs = require( 'fs' ),
                 SOURCE_DIR = 'src/',
                 BUILD_DIR = 'build/',
                 BANNER_TEXT = '/*! This file is auto-generated */',
-                autoprefixer = require('autoprefixer'),
-                mediaConfig = {},
-                mediaBuilds = ['audiovideo', 'grid', 'models', 'views'];
+                autoprefixer = require( 'autoprefixer' );
 
         // Load tasks.
         require('matchdep').filterDev(['grunt-*', '!grunt-legacy-util']).forEach( grunt.loadNpmTasks );
         // Load legacy utils
         grunt.util = require('grunt-legacy-util');
 
-        mediaBuilds.forEach( function ( build ) {
-                var path = SOURCE_DIR + 'wp-includes/js/media';
-                mediaConfig[ build ] = { files : {} };
-                mediaConfig[ build ].files[ path + '-' + build + '.js' ] = [ path + '/' + build + '.manifest.js' ];
-        } );
-
         // Project configuration.
         grunt.initConfig({
                 postcss: {
@@ -175 +170 @@
                                 }
                         }
                 },
-                browserify: mediaConfig,
                 sass: {
                         colors: {
                                 expand: true,
@@ -336 +330 @@
                                 ]
                         },
                         media: {
-                                options: {
-                                        browserify: true
-                                },
                                 src: [
                                         SOURCE_DIR + 'wp-includes/js/media/**/*.js'
                                 ]
@@ -558 +549 @@
                                 dest: SOURCE_DIR + 'wp-includes/js/jquery/jquery.masonry.min.js'
                         }
                 },
-
+                webpack: {
+                        options: {
+                                stats: ! process.env.NODE_ENV || 'development' === process.env.NODE_ENV
+                        },
+                        prod: webpackConfig,
+                        dev: Object.assign( { watch: true }, webpackDevConfig )
+                },
                 concat: {
                         tinymce: {
                                 options: {
@@ -741 +738 @@
                                 }
                         },
                         config: {
-                                files: 'Gruntfile.js'
+                                files: [
+                                        'Gruntfile.js',
+                                        'webpack-dev.config.js',
+                                        'webpack.config.js'
+                                ]
                         },
                         colors: {
                                 files: [SOURCE_DIR + 'wp-admin/css/colors/**'],
@@ -779 +780 @@
 
         // Register tasks.
 
+        // Webpack task.
+        grunt.loadNpmTasks( 'grunt-webpack' );
+
         // RTL task.
         grunt.registerTask('rtl', ['rtlcss:core', 'rtlcss:colors']);
 
@@ -802 +806 @@
         grunt.renameTask( 'watch', '_watch' );
 
         grunt.registerTask( 'watch', function() {
-                if ( ! this.args.length || this.args.indexOf( 'browserify' ) > -1 ) {
-                        grunt.config( 'browserify.options', {
-                                browserifyOptions: {
-                                        debug: true
-                                },
-                                watch: true
-                        } );
+                if ( ! this.args.length || this.args.indexOf( 'webpack' ) > -1 ) {
 
-                        grunt.task.run( 'browserify' );
+                        grunt.task.run( 'webpack:dev' );
                 }
 
                 grunt.task.run( '_' + this.nameArgs );
@@ -821 +819 @@
         ] );
 
         grunt.registerTask( 'precommit:js', [
-                'browserify',
+                'webpack:prod',
                 'jshint:corejs',
                 'uglify:bookmarklet',
                 'uglify:masonry',
@@ -890 +888 @@
                                         return regex.test( result.stdout );
                                 }
 
-                                if ( [ 'package.json', 'Gruntfile.js' ].some( testPath ) ) {
+                                if ( [ 'package.json', 'Gruntfile.js', 'webpack.config.js' ].some( testPath ) ) {
                                         grunt.log.writeln( 'Configuration files modified. Running `prerelease`.' );
                                         taskList.push( 'prerelease' );
                                 } else {
@@ -988 +986 @@
         grunt.event.on('watch', function( action, filepath, target ) {
                 var src;
 
-                if ( [ 'all', 'rtl', 'browserify' ].indexOf( target ) === -1 ) {
+                if ( [ 'all', 'rtl', 'webpack' ].indexOf( target ) === -1 ) {
                         return;
                 }
 

package.json

@@ -15 +15 @@
     "autoprefixer": "^6.5.1",
     "grunt": "~0.4.5",
     "grunt-banner": "^0.6.0",
-    "grunt-browserify": "~5.0.0",
     "grunt-contrib-clean": "~1.0.0",
     "grunt-contrib-compress": "~1.3.0",
     "grunt-contrib-concat": "~1.0.0",
@@ -35 +34 @@
     "grunt-replace": "~1.0.1",
     "grunt-rtlcss": "~2.0.1",
     "grunt-sass": "~1.2.1",
+    "grunt-webpack": "^3.0.2",
     "ink-docstrap": "^1.3.0",
-    "matchdep": "~1.0.0"
+    "matchdep": "~1.0.0",
+    "matchdep": "~1.0.0",
+    "webpack": "^3.5.4",
+    "webpack-dev-server": "^2.7.1"
   }
 }

webpack-dev.config.js

@@ +1 @@
+var path         = require('path'),
+        SOURCE_DIR   = 'src/',
+        mediaConfig  = {},
+        mediaBuilds  = ['audiovideo', 'grid', 'models', 'views'],
+        webpack      = require('webpack');
+
+
+mediaBuilds.forEach( function ( build ) {
+        var path = SOURCE_DIR + 'wp-includes/js/media';
+        mediaConfig[ build ] = './' + path + '/' + build + '.manifest.js';
+} );
+
+module.exports = {
+        cache: true,
+        entry: mediaConfig,
+        output: {
+                path:     path.join( __dirname, 'src/wp-includes/js' ),
+                filename: 'media-[name].js'
+        }
+}

webpack.config.js

@@ +1 @@
+var path         = require('path'),
+        SOURCE_DIR   = 'src/',
+        mediaConfig  = {},
+        mediaBuilds  = ['audiovideo', 'grid', 'models', 'views'],
+        webpack      = require('webpack');
+
+
+mediaBuilds.forEach( function ( build ) {
+        var path = SOURCE_DIR + 'wp-includes/js/media';
+        mediaConfig[ build ] = './' + path + '/' + build + '.manifest.js';
+} );
+
+module.exports = {
+        cache: true,
+        entry: mediaConfig,
+        output: {
+                path:     path.join( __dirname, 'src/wp-includes/js' ),
+                filename: 'media-[name].js'
+        },
+        plugins: [
+                new webpack.optimize.ModuleConcatenationPlugin()
+        ]
+}