WebPack support

[jihocech]

Could you provide an example or a documentation how to use it with the WebPack please?
I have tried it with common WebPack config, but it doesn't work.

[owais]

Some more details like output log would helps other help you much better.

Main thing you might be missing is the JSX loader and node_modules support.

var webpack = require('webpack');
var BowerWebpackPlugin = require("bower-webpack-plugin");

module.exports = {
    context: __dirname,
    entry: "./main.js",
    output: {
        path: "[bundle_dir]",
        filename: "[name]-[hash].js"
    },

    plugins: [
      new BowerWebpackPlugin(),
      new webpack.ProvidePlugin({
        $:      "jquery",
        jQuery: "jquery",
        hammerjs: "hammerjs",
        react: "React"
      })
    ],

    module: {
      loaders: [
          { test: /\.jsx$/, loader: 'jsx-loader?insertPragma=React.DOM&harmony' },
          { test: /\.css$/, loader: "style-loader!css-loader" },
          { test: /\.scss$/, loader: "style!css!sass!" },
          { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
          { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,   loader: "url?limit=10000&minetype=application/font-woff" },
          { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,  loader: "url?limit=10000&minetype=application/font-woff" },
          { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=application/octet-stream" },
          { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,    loader: "file" },
          { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,    loader: "url?limit=10000&minetype=image/svg+xml" }
      ],
    },

    resolve: {
      modulesDirectories: ['web_modules', 'node_modules', 'bower_components'],
      extensions: ['', '.js', '.jsx']
    },
}

This is my webpack config.

main.js looks like this,

require('./js/app.jsx');

and js/app.jsx looks like this,

var React = require('react');
var injectTapEventPlugin = require("react-tap-event-plugin");
var mui = require('material-ui');

var RaisedButton = mui.RaisedButton;

injectTapEventPlugin();


var Index = React.createClass({
  render: function(){
    return <div>
          <RaisedButton label="My Material UI button" primary={true} />
    </div>
  }
});


React.render(
  <Index />,
  document.getElementById('main-app')
);

[owais]

Forgot about less files. You can import an app.less in main.js just liek app.jsx

require('./less/app.less');

and then in app.less you can have

@import "~material-ui/src/less/scaffolding.less";
@import "material-variables.less";
@import "~material-ui/src/less/components.less";

The ~ means you want to load the file from modules instead of a relative path.

[wizawu]

@import "~material-ui/src/less/scaffolding.less";
@import "material-variables.less";
@import "~material-ui/src/less/components.less";

is no longer in master branch.

[owais]

@wizawu yes, looks like styles have moved to react components themselves. Interesting.

[owais]

So if you are using master, you'll probably not need to import those less files.

[hai-cea]

Looks like this question has been addressed.

[seasonli]

It seems that failed complied by babel-loader? Is that not been supported yet?