{"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 For the Babel installation, we need the following command:<\/p>\n\n\n Now we have to create a At first, we define the With To run Webpack easier, we do not use its CLI but NPM scripts. The related part of my With 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":{"footnotes":"","wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","lazy_load_responsive_images_disabled":false},"categories":[6],"tags":[],"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"}],"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}]}}npm install --save-dev webpack<\/code><\/div><\/pre>\n\n\n
npm install --save-dev babel-loader babel-core babel-preset-env<\/code><\/div><\/pre>\n\n\n
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><\/div>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
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
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
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><\/div>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
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