{"id":4197,"date":"2017-08-24T16:50:22","date_gmt":"2017-08-24T14:50:22","guid":{"rendered":"https:\/\/florianbrinkmann.com\/en\/?p=4197"},"modified":"2020-02-09T10:59:45","modified_gmt":"2020-02-09T09:59:45","slug":"webpack-and-babel","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/webpack-and-babel-4197\/","title":{"rendered":"Setting up Webpack and Babel"},"content":{"rendered":"\n

Webpack is a bundler with the main purpose of bundling JS files for the usage in browsers (it also can, for example, compile SASS to CSS). This post shows you how to setup Webpack and Babel \u2013 a tool for compiling ES6 JavaScript code to ES5 code.<\/p>\n\n\n\n\n\n\n\n

After trying the setup for Webpack<\/a> and Babel<\/a> a few days ago without success, I get it working quick today (just needed to follow the various guides from the Webpack docs<\/a> \ud83d\ude00 ). This tutorial assumes that you already have a package.json inside the project.<\/p>\n\n\n\n

To install Webpack, we run the following code:<\/p>\n\n\n

npm install --save-dev webpack<\/code><\/span><\/pre>\n\n\n
For the Babel installation, we need the following command:<\/p>\n\n\n
npm install --save-dev babel-loader babel-core babel-preset-env<\/code><\/span><\/pre>\n\n\n
Now we have to create a webpack.config.js<\/code> to configure Webpack. This file looks like that in our example:<\/p>\n\n\n
const<\/span> path = require<\/span>('path'<\/span>);\n\nmodule<\/span>.exports = {\n\tentry<\/span>: '.\/assets\/js\/src\/functions.js'<\/span>,\n\toutput<\/span>: {\n\t\tfilename<\/span>: 'bundle.js'<\/span>,\n\t\tpath<\/span>: path.resolve(__dirname, 'assets\/js'<\/span>)\n\t},\n\tmodule<\/span>: {\n\t\trules<\/span>: [\n\t\t\t{\n\t\t\t\ttest<\/span>: \/\\.js$\/<\/span>,\n\t\t\t\texclude<\/span>: \/node_modules\/<\/span>,\n\t\t\t\tuse<\/span>: {\n\t\t\t\t\tloader<\/span>: 'babel-loader'<\/span>,\n\t\t\t\t\toptions<\/span>: {\n\t\t\t\t\t\tpresets<\/span>: ['env'<\/span>]\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t]\n\t}\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
At first, we define the entry<\/code> file, which should be handled by Webpack, and with output<\/code> the output file. That was the basic configuration of Webpack \u2013 the module<\/code> part is Babel related.<\/p>\n\n\n\n
To run Webpack easier, we do not use its CLI but NPM scripts. The related part of my package.json<\/code> looks like that:<\/p>\n\n\n
\"scripts\"<\/span>: {\n\t\"watch\"<\/span>: \"webpack --watch\"<\/span>,\n\t\"production\"<\/span>: \"webpack -p\"<\/span>,\n\t\"build\"<\/span>: \"webpack\"<\/span>\n},<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Do you use Webpack? If so, for what?<\/p>\n","protected":false},"excerpt":{"rendered":"
Webpack is a bundler with the main purpose of bundling JS files for the usage in browsers (it also can, for example, compile SASS to CSS). This post shows you how to setup Webpack and Babel \u2013 a tool for compiling ES6 JavaScript code to ES5 code.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-4197","post","type-post","status-publish","format-standard","hentry","category-web-development"],"wp-worthy-pixel":{"ignored":false,"public":"5b67b39b3d6443c0aadfc97a33abbf39","server":"vg07.met.vgwort.de","url":"https:\/\/vg07.met.vgwort.de\/na\/5b67b39b3d6443c0aadfc97a33abbf39"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=4197"}],"version-history":[{"count":3,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4197\/revisions"}],"predecessor-version":[{"id":5857,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/4197\/revisions\/5857"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=4197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=4197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=4197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
With npm run watch<\/code>, we can now run the webpack --watch<\/code> command, which will start Webpack and let it watch files for changes. The webpack -p<\/code> command is for production<\/a> \u2013 it minifies the output, runs the LoaderOptionsPlugin<\/a> (which will be removed in a later version of Webpack) and sets the NodeJS environment variable, so that certain packages can compile differently.<\/p>\n\n\n\n
With module.rules<\/code> we set Babel as a Webpack loader<\/a>. It should match for all JS files excluding the node_modules<\/code> directory. We use the just installed babel-loader<\/code> as a loader with the env<\/code> preset<\/a>.<\/p>\n\n\n\n