home.


Tagged: webpack


Using Webpack with babel and reactjs

If you’re using webpack–and you probably are–with react, you can set webpack to process all the javascript files with babel, converting all the es2015 and reactjs stuff ready for the web.

The following converts everything, including the es2015 modules, from src/app.js to bundle.js, using the babel loader, with es2015 and react presets.

module.exports = {
        entry: "./src/app.js",
        output: {
                path: __dirname,
                filename: "bundle.js"
        },
        module: {
                loaders: [
                        { loader: 'babel', query: { presets: ['es2015', 'react'] } }
                ]
        }
};

The above should be your webpack.config.js file

The npm modules you need are:

npm install webpack
npm install babel-loader babel-core babel-preset-es2015 --save-dev
reactjs webpack

Webpack: Quick introduction

The wonders, or horrors, of the reactjs toolchain generally includes webpack.

First off, on ubuntu, ensure you’re on the latest node:

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash
sudo apt-get install -y nodejs

Afer you’ve initialised your package.json with npm init -y or similar, install webpack and its css and style loader.

npm install webpack
npm install css-loader style-loader

Now let’s have an entry.js file that will be included in our ‘pack’

require("./style.css");
document.write(require("./content.js"));

The first line includes a css file, and the second writes out content that is included in the module export of the content.js file.

Here’s the style.css file:

body {
    background: yellow;
}

And here’s the content.js file

module.exports = "It works from content.js.";

Now to actually bundle this up, you need to call webpack as thus:

node_modules/webpack/bin/webpack.js ./entry.js bundle.js --module-bind 'css=style!css'

This defines all files with .css use the css-loader module we installed above, and bundles everything in entry.js into bundle.js

But you probably want all the command line stuff in a config file, the webpack.config.js file as default:

module.exports = {
        entry: "./entry.js",
        output: {
                path: __dirname,
                filename: "bundle.js"
        },
        module: {
                loaders: [
                        { test: /\.css$/, loader: "style!css" }
                ]
        }
};
webpack reactjs

Page 1 of 1