Using Truffle and Webpack (beta)

This is a BETA document. Updated frequently.

Note: This document assumes you've started with a project that was originally created using truffle init and relied on the default Truffle builder.

1. Get the latest Truffle

Right now, you need Truffle from source:

$ npm uninstall -g truffle
$ cd <your workspace>
$ git clone https://github.com/ConsenSys/truffle.git

2. Get the latest ether-pudding

For now, we have to get the newest ether-pudding as it's not released yet.

$ cd <your workspace>
$ git clone https://github.com/ConsenSys/ether-pudding.git

3. Link Truffle and ether-pudding, and install both.

$ cd <your workspace>
$ cd ether-pudding
$ npm install
$ npm link
$ cd ../truffle
$ npm install
$ npm link ether-pudding

4. Install webpack

$ npm install -g webpack

5. Navigate to your project and install dependencies

Here, we assume you're using React too.

$ cd <your workspace>/<your project>
$ npm install babel-core babel-loader babel-preset-es2015 babel-preset-react sass-loader style-loader node-sass json-loader webpack extract-text-webpack-plugin ether-pudding web3 bluebird --save

Then because we have a special ether-pudding, link it too:

$ cd <your workspace>/<your project>
$ npm link ether-pudding

6. Create a .babelrc:

$ touch <yourworkspace>/<your project>/.babelrc

Fill it with this:

{
  "ignore": ["*.min.js"],
  "compact": false,
  "presets": ["es2015", "react"]
}

7. Create a webpack.config.js file:

$ touch <yourworkspace>/<your project>/webpack.config.js

And fill it with this:

var fs = require("fs");
var path = require('path');
var webpack = require("webpack");
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var environment = process.env.NODE_ENV || "development";

var provided = {
  "Web3": "web3",
  "Pudding": "ether-pudding",
  "Promise": "bluebird"
};

// Get all the compiled contracts for our environment.
var contracts_directory = path.join("./", "environments", environment, "contracts");
fs.readdirSync("./environments/" + environment + "/contracts").forEach(function(file) {
  if (path.basename(file).indexOf(".sol.js")) {
    provided[path.basename(file, ".sol.js")] = path.resolve(contracts_directory + "/" + file);
  }
});

module.exports = {
  entry: './app/javascripts/app.js',
  output: {
    path: "./environments/" + environment + "/build",
    filename: 'app.js'
  },
  module: {
    loaders: [
      { test: /\.(js|jsx|es6)$/, exclude: /node_modules/, loader: "babel-loader"},
      { test: /\.scss$/i, loader: ExtractTextPlugin.extract(["css", "sass"])},
      { test: /\.json$/i, loader: "json"}
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
        ENV: '"' + process.env.NODE_ENV + '"',
        WEB3_PROVIDER_LOCATION: '"' + process.env.WEB3_PROVIDER_LOCATION + '"'
    }),
    new webpack.ProvidePlugin(provided),
    new CopyWebpackPlugin([
      { from: './app/index.html', to: "index.html" },
      { from: './app/images', to: "images" },
    ]),
    new ExtractTextPlugin("app.css")
  ]
};

8. Change your entry in webpack.config.js

Open up wepback.config.js, and change the entry configuration so that it points to the main file of your app. This file is responsible for import'ing/require'ing all other dependencies.

9. Change the configuration of webpack.config.js to match your file structure.

Notice that in webpack.config.js, we use the CopyWebpackPlugin to move the index.html file and images directory over during the build process. If you have other/different files and folders you need to copy, change this configuration to match your project.

10. Include all your dependencies in your entry file

Find your truffle.json file and locate the build keyword. All the files and folders you list there for app.js need to be import'ed or require'ed instead. Also -- and this is odd, but it's a "webpack-ism" -- you have to import your CSS as well. Here, we're importing a .scss file which uses sass imports to include the rest of our CSS. This CSS is pulled out into its own file later on in the build process.

import {} from "../stylesheets/app.scss";

import NavBar from "./navbar.jsx";
import Footer from "./footer.jsx";
import FrontPage from "./frontpage.jsx";
import DappPage from "./dapppage.jsx";
...

11. Edit the build keyword in truffle.json

We're using webpack. So let's completely replace the value of the build keyword in truffle.json with a single string. This string represents the command that will be run by Truffle to initiate your build process. Your truffle.json should look like this:

{
  "build": "webpack",
  "deploy": [
    ...
  ],
  "rpc": {
    ...
  }
};

12. Run the build!

Run truffle build from within your project and see if it works. You can also run webpack to get the same effect. Cheers!