{"id":1844,"date":"2016-05-14T21:40:17","date_gmt":"2016-05-14T16:10:17","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1844"},"modified":"2016-05-14T21:40:17","modified_gmt":"2016-05-14T16:10:17","slug":"setting-up-webpack-babel-reactjs","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/setting-up-webpack-babel-reactjs\/","title":{"rendered":"Setting up Webpack + Babel + ReactJS"},"content":{"rendered":"

I started using Webpack<\/a> module bundler recently and thought I would document some of my learning. In the past couple of\u00a0posts I wrote about bundling JavaScript projects using Browserify\u00a0module bundlers. Webpack can be used as a replacement for Browserify; but it has some nice additional features like bundling of static files and code splitting.<\/p>\n

This post is not meant to be tutorial on Webpack, I just wanted to describe\u00a0how to configure Webpack, specifically\u00a0using Webpack loaders for Bablel and ReactJS. I will show how to build a JS project using standalone Webpack and also using Webpack APIs in Gulp.\u00a0The project is available on Github at https:\/\/github.com\/ramkulkarni1\/WebpackBlitzReactStarter<\/a><\/p>\n

Module Dependencies<\/h2>\n

Node packages\u00a0required to build the project are, of course, in package.json<\/a>. If you are using above\u00a0starter project from Github, then run ‘npm install’ to install all the required packages. Else make sure you install all the packages listed in devDependencies of package.json . The list contains babel, required babel presets for ES6 and ReactJS, webpack and webpack-dev-server, webpack loaders for babel, LESS and CSS.<\/p>\n

Webpack Configuration<\/h2>\n

Webpack configuration is specified in\u00a0webpack.config.js<\/a>. This config file is read when you run webpack or webpack-dev-server command. Optional gulpfile.js (to build the project using Gulp) also loads\u00a0this file and passes to Webpack APIs.<\/p>\n

Here is a brief description of some of the entries in the config file –<\/p>\n

context :<\/span> path.<\/span>join<\/span>(<\/span>__dirname,<\/span> '<\/span>src<\/span>'<\/span>)<\/span>\n<\/pre>\n
Context sets the parent path from where\u00a0all paths in the entry element (which tells starting scripts for Webpack to process) are resolved.<\/p>\n
entry :<\/span>[<\/span>\n  '<\/span>.\/js\/index.js<\/span>'<\/span>,<\/span>\n  \/\/include following entries only if you want to use webpack-dev-server and its hot module replacement feature<\/span>\n  '<\/span>webpack-dev-server\/client?http:\/\/localhost:<\/span>'<\/span> +<\/span> serverPort +<\/span> '<\/span>\/<\/span>'<\/span>,<\/span>\n  '<\/span>webpack\/hot\/dev-server<\/span>'<\/span>\n]<\/span>\n<\/pre>\n
Entry point for\u00a0this application is src\/js\/index.js. Since we have already set the path to src in the context, we specify relative path here. The next two webpack entries are required only if you are using webpack-dev-server<\/a>\u00a0(which provides a web server using which you can test your application) and want to use its hot deployment feature.<\/p>\n
output :<\/span> {<\/span>\n  path :<\/span> outputPath,<\/span>\n  filename :<\/span> outputFileName,<\/span>\n}<\/span>\n<\/pre>\n
This entry tells Webpack where to save\u00a0output file and name of the file.<\/p>\n
outputPath =<\/span> path.<\/span>join<\/span>(<\/span>__dirname,<\/span> '<\/span>build<\/span>'<\/span>)<\/span>,<\/span>\noutputFileName =<\/span> '<\/span>bundle.js<\/span>'<\/span>\n<\/pre>\n
At the top of the script outputPath is set to build folder and file name to bundle.js<\/p>\n
devtool :<\/span> isProduction ?<\/span> null<\/span> :<\/span> '<\/span>source-map<\/span>'<\/span>,<\/span>\n<\/pre>\n
This parameter\u00a0tells Webpack if sourcemap to be generated for the output file. We set this option if we are not packaging for production (by setting NODE_ENV environment variable to ‘production’).<\/p>\n
devServer :<\/span> {<\/span>\n  outputPath :<\/span> outputPath,<\/span>\n  contentBase:<\/span> '<\/span>.\/build<\/span>'<\/span>,<\/span>\n  port :<\/span> serverPort,<\/span>\n  hot:<\/span> true<\/span>,<\/span>\n  stats:<\/span> {<\/span> colors:<\/span> true<\/span>}<\/span>,<\/span>\n  filename:<\/span> outputFileName\n}<\/span>\n<\/pre>\n
These are the settings passed to webpack-dev-server. We are again setting path of output file (probably not require), folder from where the server will serve files (as contentBase), server port and output file name. Note that when you use webpack-dev-server, generated output files are not written to the disk, but they are served from the memory. So if you just run webpack-dev-server, you may not find bundle.js (output filename) in build folder.<\/p>\n
module :<\/span> {<\/span>\n  loaders :<\/span>[<\/span>\n    {<\/span>\n      test<\/span>:<\/span> \/<\/span>\\.<\/span>jsx<\/span>?<\/span>$<\/span>\/<\/span>,<\/span>\n      exclude:<\/span> \/<\/span>node_modules<\/span>\/<\/span>,<\/span>\n      loader:<\/span> '<\/span>babel<\/span>'<\/span>,<\/span>\n      query:<\/span> {<\/span>\n        presets:<\/span> [<\/span>'<\/span>es2015<\/span>'<\/span>,<\/span> '<\/span>stage-0<\/span>'<\/span>,<\/span> '<\/span>react<\/span>'<\/span>,<\/span> '<\/span>react-hmre<\/span>'<\/span>]<\/span>\n      }<\/span>\n    }<\/span>,<\/span>\n    {<\/span>\n      test<\/span> :<\/span> \/<\/span>\\.<\/span>less<\/span>$<\/span>\/<\/span>,<\/span>\n      loader :<\/span> extractCSS ?<\/span> ExtractPlugin.<\/span>extract(<\/span>'<\/span>style<\/span>'<\/span>,<\/span> '<\/span>css!less<\/span>'<\/span>)<\/span> :<\/span> '<\/span>style-loader!css-loader!less-loader<\/span>'<\/span>\n    }<\/span>,<\/span>\n    {<\/span>\n      test<\/span>:<\/span> \/<\/span>\\.<\/span>css<\/span>$<\/span>\/<\/span>,<\/span>\n      loader:<\/span> extractCSS ?<\/span> ExtractPlugin.<\/span>extract(<\/span>'<\/span>style<\/span>'<\/span>,<\/span> '<\/span>css<\/span>'<\/span>)<\/span> :<\/span> '<\/span>style-loader!css-loader<\/span>'<\/span>\n    }<\/span>,<\/span>\n    {<\/span>\n      test<\/span>:<\/span> \/<\/span>\\.<\/span>(<\/span>png<\/span>|<\/span>jpg<\/span>|<\/span>svg<\/span>)<\/span>$<\/span>\/<\/span>,<\/span>\n      loaders:<\/span> [<\/span>'<\/span>url<\/span>'<\/span>,<\/span> '<\/span>image-webpack<\/span>'<\/span>]<\/span>\n    }<\/span>\n  ]<\/span>\n}<\/span>\n<\/pre>\n
Next we configure Webpack loaders. We tell Webpack how to process files with certain extensions by specifying loaders. So in the above snippet we have loaders for processing js\/jsx, .less, .css and image files. I have added image loader just to show how images can be packaged in the output JS file using Webpack. It may not be a good idea to load large images using image loader upfront, because images are included as data url (content is embedded as base64 in the output JS file). But it may be a great way to package small icons. We will see sample of this later.<\/p>\n
Just like images, you can also package CSS inside the output JS file. However we can make Webpack output them seperately too, by using\u00a0extract-text-webpack-plugin. In the above configuration, this options is controlled by a flag\u00a0extractCSS. If this is set to true, CSS files will output separately.<\/p>\n
resolve:<\/span> {<\/span>\n  extensions:<\/span> [<\/span>'<\/span>'<\/span>,<\/span> '<\/span>.js<\/span>'<\/span>,<\/span> '<\/span>.jsx<\/span>'<\/span>,<\/span> '<\/span>.css<\/span>'<\/span>,<\/span> '<\/span>.less<\/span>'<\/span>]<\/span>\n}<\/span>\n<\/pre>\n
In the resolve->extensions option we till Webpack what file extensions to be considered for processing.<\/p>\n
plugins :<\/span> [<\/span>\n  failPlugin,<\/span>\n  new<\/span> copyWebpackPlugin(<\/span>[<\/span>\n    {<\/span>from :<\/span> '<\/span>html<\/span>'<\/span>,<\/span> to:<\/span> __dirname +<\/span> '<\/span>\/build<\/span>'<\/span>}<\/span>,<\/span>\n  ]<\/span>)<\/span>,<\/span>\n  \/\/include following plugin only if you want to use webpack-dev-server and its hot module replacement feature<\/span>\n  new<\/span> webpack.<\/span>HotModuleReplacementPlugin(<\/span>)<\/span>\n]<\/span>\n<\/pre>\n
Here we add a plugin to return status code 1 if Webpack fails (using\u00a0webpack-fail-plugin), a plugin to copy static files in html folder to build folder (copy-webpack-plugin) and a plugin to enable hot module replacement in Webpack<\/a>.<\/p>\n
serverPort :<\/span> serverPort\n<\/pre>\n
The last parameter is not for Webpack, but used in the gulpfile in this project. It just for passing serverPort value set in this config file to Gulp.<\/p>\n
See Webpack configuration docs<\/a> for more detailed information.<\/p>\n
Application\u00a0Source Code<\/h2>\n
The sample app is very simple; the main JS entry point is index.js<\/a> that creates React view called MainView<\/a>. This view\u00a0displays a textbox, a button and a image icon.<\/p>\n
index.js –<\/p>\n
import<\/span> React from '<\/span>react<\/span>'<\/span>;<\/span>\nimport<\/span> ReactDOM from '<\/span>react-dom<\/span>'<\/span>;<\/span>\nimport<\/span> MainView from \"<\/span>.\/mainView<\/span>\"<\/span>;<\/span>\n\nvar<\/span> mainView =<\/span> React.<\/span>createElement(<\/span>MainView,<\/span>{<\/span>name:<\/span>'<\/span>there<\/span>'<\/span>}<\/span>,<\/span>null<\/span>)<\/span>;<\/span>\n\nReactDOM.<\/span>render(<\/span>mainView,<\/span> document.<\/span>getElementById(<\/span>\"<\/span>main<\/span>\"<\/span>)<\/span>)<\/span>;<\/span>\n<\/pre>\n
and mainView.js<\/p>\n
import<\/span> React from '<\/span>react<\/span>'<\/span>;<\/span>\nimport<\/span> '<\/span>..\/css\/app.less<\/span>'<\/span>;<\/span>\nimport<\/span> homeImage from '<\/span>..\/html\/home.png<\/span>'<\/span>;<\/span>\n\nexport<\/span> default<\/span> class<\/span> MainView extends<\/span> React.<\/span>Component {<\/span>\n  constructor<\/span>(<\/span>props)<\/span> {<\/span>\n    super<\/span>(<\/span>props)<\/span>;<\/span>\n\tthis<\/span>.<\/span>state =<\/span> {<\/span>\n\t  name :<\/span> props.<\/span>name\n\t}<\/span>\n}<\/span>\n\nonSetName =<\/span> (<\/span>)<\/span> =<\/span>><\/span> {<\/span>\n  this<\/span>.<\/span>setState(<\/span>{<\/span>\n    name :<\/span> this<\/span>.<\/span>refs.<\/span>nameTxt.<\/span>value\n  }<\/span>)<\/span>\n}<\/span>\n\nrender(<\/span>)<\/span> {<\/span>\n  return<\/span> <<\/span>div className=<\/span>\"<\/span>main-view<\/span>\"<\/span>><\/span>\n\tHello {<\/span>this<\/span>.<\/span>state.<\/span>name}<\/span> !<\/span>\n\t<<\/span>p\/<\/span>><\/span>\n    Enter Name :<\/span> <<\/span>input<\/span> type=<\/span>\"<\/span>text<\/span>\"<\/span> ref=<\/span>\"<\/span>nameTxt<\/span>\"<\/span> \/<\/span>><\/span>\n    <<\/span>button type=<\/span>\"<\/span>button<\/span>\"<\/span> onClick=<\/span>{<\/span>this<\/span>.<\/span>onSetName}<\/span>><\/span>Set Name<<\/span>\/<\/span>button><\/span>\n    <<\/span>p\/<\/span>><\/span>\n    <<\/span>img src=<\/span>{<\/span>homeImage}<\/span>\/<\/span>><\/span> -<\/span> Example of loaging image with<\/span> webpack image loader\n\t<<\/span>\/<\/span>div><\/span>\n  }<\/span>\n}<\/span>\n<\/pre>\n
Notice that static assets like app.less and home.png are also imported in the above file. As mentioned earlier, CSS output after processing app.less can be made to be saved as a separate file\u00a0using\u00a0extract-text-webpack-plugin – but the above code won’t change if we do that. Of course, if you create a seperate CSS file, you will have to include that in the html file using link tag.<\/p>\n
Building and Running the Application<\/h2>\n
To build the application run webpack command. Webpack will read webpack.config.js file and generate output file, bundle.js in build folder. It will also copy index.html from html folder. This application really does not need a webserver, so you can run index.html directly in a browser. But if you run it using webpack-dev-server, you can take advantage of its hot module replacement feature and you can test you code without manually building the application after you make any changes to the source code. Run webpack-dev-server and browse to http:\/\/localhost:8080 to run the application. Note that you should install webpack and webpack-dev-server packages globally (npm install webpack webpack-dev-server -g)<\/p>\n
If you make any changes to the source code, for example you change styles in app.less or change the markup in mainView.js, you don’t need to rebuild the app manually – webpack-dev-server automatically detects changes and rebuilds the app and refreshes the page in the browser (because of hot module replacement feature).<\/p>\n
Using Webpack APIs with Gulp<\/h2>\n
Webpack provides JS APIs too, which you can use with Gulp. gulpfile.js<\/a> shows example of this.<\/p>\n
var<\/span> gulp =<\/span> require(<\/span>'<\/span>gulp<\/span>'<\/span>)<\/span>,<\/span>\n  webpack =<\/span> require(<\/span>'<\/span>webpack<\/span>'<\/span>)<\/span>,<\/span>\n  devServer =<\/span> require(<\/span>'<\/span>webpack-dev-server<\/span>'<\/span>)<\/span>\n;<\/span>\n\nvar<\/span> webpackConfig =<\/span> require(<\/span>'<\/span>.\/webpack.config<\/span>'<\/span>)<\/span>;<\/span>\n\nfunction<\/span> compile<\/span>(<\/span>)<\/span> {<\/span>\n  var<\/span> compiler =<\/span> webpack(<\/span>webpackConfig)<\/span>;<\/span>\n\n  compiler.<\/span>run(<\/span>function<\/span>(<\/span>err,<\/span> stat)<\/span>{<\/span>\n\tif<\/span> (<\/span>err)<\/span> {<\/span>\n\t  console.<\/span>log<\/span>(<\/span>'<\/span>Error building application - <\/span>'<\/span>,<\/span> err)<\/span>;<\/span>\n\t  return<\/span>;<\/span>\n\t}<\/span>\n\tvar<\/span> statJson =<\/span> stat.<\/span>toJson(<\/span>)<\/span>;<\/span>\n\tif<\/span> (<\/span>statJson.<\/span>errors.<\/span>length<\/span> ><\/span> 0<\/span>)<\/span> {<\/span>\n\t  console.<\/span>log<\/span>(<\/span>'<\/span>Error building application - <\/span>'<\/span>,<\/span> statJson.<\/span>errors)<\/span>;<\/span>\n\t  return<\/span>;<\/span>\n\t}<\/span>\n\n\tconsole.<\/span>log<\/span>(<\/span>'<\/span>Application built successfully !<\/span>'<\/span>)<\/span>;<\/span>\n  }<\/span>)<\/span>;<\/span>\n}<\/span>\n\nfunction<\/span> startServer(<\/span>)<\/span> {<\/span>\n  var<\/span> compiler =<\/span> webpack(<\/span>webpackConfig)<\/span>;<\/span>\n  var<\/span> server =<\/span> new<\/span> devServer(<\/span>compiler,<\/span> webpackConfig.<\/span>devServer)<\/span>;<\/span>\n  server.<\/span>listen(<\/span>webpackConfig.<\/span>serverPort)<\/span>;<\/span>\n}<\/span>\n\ngulp.<\/span>task(<\/span>'<\/span>default<\/span>'<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\n  startServer(<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n\ngulp.<\/span>task(<\/span>'<\/span>build<\/span>'<\/span>,<\/span> function<\/span>(<\/span>)<\/span> {<\/span>\n  compile<\/span>(<\/span>)<\/span>;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/pre>\n
Run ‘gulp’ command to build the project and start webpack-dev-server. Run ‘gulp build’ if you just want to build the project and generate output files in build folder.<\/p>\n
-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"
I started using Webpack module bundler recently and thought I would document some of my learning. In the past couple of\u00a0posts I wrote about bundling JavaScript projects using Browserify\u00a0module bundlers. Webpack can be used as a replacement for Browserify; but it has some nice additional features like bundling of static files and code splitting. This … <\/p>\n
Continue reading “Setting up Webpack + Babel + ReactJS”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Setting up Webpack + Babel + ReactJS","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[20,6,1],"tags":[123,129,5,130,131],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-tK","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1844"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=1844"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1844\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=1844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=1844"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=1844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}