正确的方法来通过webpack来获取材料-ui

Question

我正在尝试通过webpack使用material-ui。但是，我在chrome dev-tool

中收到了错误消息

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中使用material-ui的建议。 感谢。

Answer 1

最后，我得到了这个。

答案很简单：

1. 按照npm：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;