Modo corretto per richiedere materiale-ui tramite webpack

Question

Sto provando a utilizzare material-ui tramite webpack. Tuttavia, ho ricevuto il messaggio di errore in cromo-dev strumento

Uncaught ReferenceError: require is not defined 

miei webpack.config.js:

var bower_dir = __dirname + '/bower_components'; 
var node_modules_dir = __dirname + '/node_modules'; 

var config = { 
    addVendor: function (name, path) { 
    this.resolve.alias[name] = path; 
    this.module.noParse.push(new RegExp(path)); 
    }, 

    entry: { 
    Messenger: './app/Messenger.jsx', 
    AppComponent: './app/AppComponent.jsx' 
    }, 

    // The resolve.alias object takes require expressions 
    // (require('react')) as keys and filepath to actual 
    // module as values 
    resolve: { 
    alias: {}, 
    extensions: ['', '.jsx'] 
    }, 

    output: { 
    path: './www', 
    filename: '[name].bundle.js' 
    }, 

    module: { 
    noParse: [], 
    loaders: [ 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, // use ! to chain loaders 
     { test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png" }, 
     { test: /\.jsx$/, loader: 'jsx-loader' } 
    ] 
    } 
}; 

config.addVendor('react', bower_dir + '/react/react.min.js'); 
config.addVendor('material-ui', bower_dir + '/material-ui/src/index.js'); 
config.addVendor('react-tap-event-plugin', node_modules_dir + '/react-tap-event-plugin/src/injectTapEventPlugin.js'); 

module.exports = config; 

Ho bisogno di alcuni suggerimenti su come richiedere il materiale-ui con webpack. Grazie.

Answer 1

Infine, ho capito.

La risposta è abbastanza semplice:

1. Installare material-ui da NPM: npm install material-ui --save
2. Aggiungi resolve.moduleDirectories, resolve.extensions
3. Attiva modalità armonia nella jsx-loader da jsx-loader?harmony

Il webpack finale. config.js Ho capito:

var config = { 
    entry: { 
    Messenger: './app/Messenger.jsx', 
    AppComponent: './app/AppComponent.jsx' 
    }, 

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

    output: { 
    path: './www', 
    filename: '[name].bundle.js' 
    }, 

    module: { 
    noParse: [], 
    loaders: [ 
     { test: /\.css$/, loader: 'style-loader!css-loader' }, // use ! to chain loaders 
     { test: /\.png$/, loader: "url-loader?limit=100000&mimetype=image/png" }, 
     { test: /\.jsx$/, loader: 'jsx-loader?harmony' } 
    ] 
    } 
}; 

module.exports = config;