{"id":1989,"date":"2017-10-13T16:54:32","date_gmt":"2017-10-13T11:54:32","guid":{"rendered":"https:\/\/thedevcouple.com\/?p=1989"},"modified":"2017-10-13T17:27:38","modified_gmt":"2017-10-13T12:27:38","slug":"webpack-for-wordpress","status":"publish","type":"post","link":"https:\/\/thedevcouple.com\/webpack-for-wordpress\/","title":{"rendered":"Webpack Makes It to the WordPress Core as A JS Bundle Manager"},"content":{"rendered":"

In late 2014, to split JavaScript files into maintainable modules, Browserify<\/a><\/strong> was introduced. Recently, WordPress is rapidly moving towards JavaScript.<\/p>\n

A significant part of Gutenberg is composed of JavaScript. So, it is quite obvious to take a step towards the latest bundle manager available for JavaScript.<\/p>\n

That’s why Adam Silverstein proposed<\/a> to replace Browserify with Webpack<\/a><\/strong> four months ago.<\/p>\n

\n

\"\"<\/p>\n<\/div>\n

While Browserify has served us well, Webpack is probably a better long-term choice for the project, especially with the introduction of a new JavaScript framework that may require a build.<\/p> \u2014 Use Webpack instead of Browserify for build process<\/cite><\/a><\/blockquote>\n

WordPress contributors made this decision four months ago. They even reached out to the contributors of Webpack<\/a> for their review.<\/p>\n

\ud83c\udfc6 After four months of hard work, the ticket finally made it to WordPress core on October 4th, 2017<\/a>.<\/p><\/blockquote>\n

\ud83c\udf89\u00a0Kudos to the contributors who made it all possible.<\/p>\n

\ud83e\udd14\u00a0What is a Bundle Manager?<\/h2>\n

To put in simple words, a bundle manager lets you use all of your project dependencies in the browser. It can also perform some other tasks like minifying<\/strong>, linting<\/strong>, testing<\/strong>, etc. Browserify and Webpack are the names of bundle\u00a0managers for JavaScript.<\/p>\n

WordPress used to have Browserify to maintain its JS components. Webpack replaced it last week.<\/p><\/blockquote>\n

Here are some of the qualities of Webpack which made it a more natural choice.<\/p>\n

\u2714\ufe0e Pros of Using Webpack<\/h2>\n