Ticket #40894: 40894.1.diff

Gruntfile.js

@@ -1 +1 @@
 /* jshint node:true */
+const webpackConfig = require( './webpack.config' );
+
 module.exports = function(grunt) {
         var path = require('path'),
                 fs = require( 'fs' ),
                 SOURCE_DIR = 'src/',
                 BUILD_DIR = 'build/',
-                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: {
@@ -157 +151 @@
                                 }
                         }
                 },
-                browserify: mediaConfig,
                 sass: {
                         colors: {
                                 expand: true,
@@ -318 +311 @@
                                 ]
                         },
                         media: {
-                                options: {
-                                        browserify: true
-                                },
                                 src: [
                                         SOURCE_DIR + 'wp-includes/js/media/**/*.js'
                                 ]
@@ -531 +521 @@
                                 dest: SOURCE_DIR + 'wp-includes/js/jquery/jquery.masonry.min.js'
                         }
                 },
-
+                webpack: {
+                        options: {
+                                stats: ! process.env.NODE_ENV || process.env.NODE_ENV === 'development'
+                        },
+                                prod: webpackConfig,
+                                dev: Object.assign( { watch: true }, webpackConfig)
+                },
                 concat: {
                         tinymce: {
                                 options: {
@@ -623 +619 @@
                                 }
                         },
                         config: {
-                                files: 'Gruntfile.js'
+                                files: [
+                                        'Gruntfile.js',
+                                        'webpack.config.js'
+                                ]
                         },
                         colors: {
                                 files: [SOURCE_DIR + 'wp-admin/css/colors/**'],
@@ -661 +660 @@
 
         // Register tasks.
 
+        // Webpack task.
+        grunt.loadNpmTasks( 'grunt-webpack' );
+
         // RTL task.
         grunt.registerTask('rtl', ['rtlcss:core', 'rtlcss:colors']);
 
@@ -684 +686 @@
         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' );
                 }
 
                 grunt.task.run( '_' + this.nameArgs );
@@ -703 +699 @@
         ] );
 
         grunt.registerTask( 'precommit:js', [
-                'browserify',
+                'webpack',
                 'jshint:corejs',
                 'uglify:bookmarklet',
                 'uglify:masonry',
@@ -768 +764 @@
                                         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 {
@@ -860 +856 @@
         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

@@ -32 +32 @@
     "grunt-postcss": "~0.7.1",
     "grunt-rtlcss": "~2.0.1",
     "grunt-sass": "~1.2.1",
-    "matchdep": "~1.0.0"
+    "grunt-webpack": "^3.0.0",
+    "matchdep": "~1.0.0",
+    "webpack": "^2.6.1",
+    "webpack-dev-server": "^2.5.0"
   }
 }

webpack.config.js

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