小编典典

通过Webpack要求Material-UI的正确方法

reactjs

我正在尝试通过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的建议。谢谢。


阅读 379

收藏
2020-07-22

共1个答案

小编典典

最后,我明白了。

答案很简单:

  1. material-ui通过npm 安装:npm install material-ui --save
  2. 添加resolve.moduleDirectoriesresolve.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;
2020-07-22