Правильный способ потребовать материал-ui с помощью webpack

Question

Я пытаюсь использовать material-ui с помощью webpack. Тем не менее, я получил сообщение об ошибке в хромированной DEV-инструменте

Uncaught ReferenceError: require is not defined 

Моего 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; 

мне нужно несколько советов о том, как требуется материал-интерфейс с WebPack. Спасибо.

Answer 1

Наконец-то я получил это.

Ответ довольно прост:

1. Установите material-ui по НПМ: npm install material-ui --save
2. Добавить resolve.moduleDirectories, resolve.extensions
3. Включите режим гармонии в jsx-loader по jsx-loader?harmony

Окончательный WebPack. config.js Я получил:

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;