正确的方法来通过webpack来获取材料-ui [英] Correct way to require material-ui by webpack

问题描述

我正在尝试使用webpack的 material-ui 。但是，我在chrome dev-tool中收到错误消息

 未捕获的ReferenceError：require未定义
  

我的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））; 
}，
 
条目：{
 Messenger：'。/ app / Messenger.jsx'，
 AppComponent：'。/ app / AppComponent.jsx'
}，
 
 // resolve.alias对象需要表达式
 //（require（'react'））作为键和文件路径到实际的
 //模块价值
解决：{
别名：{}，
扩展：[''，'。jsx'] 
}，
 
输出：{
路径：'。/ www'，
文件名：'[名称] .bundle.js'
}，
 
模块：{
 noParse：[ ]，
加载器：[
 {test：/\ css$/,loader：'style-loader！css-loader'}，//使用！链接加载器
 {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 +'/ trust -tap-event-plugin / src / injectTapEventPlugin.js'）; 
 
 module.exports = config; 
  

我需要一些关于如何在webpack中使用material-ui的建议。
谢谢。

解决方案

最后，我得到了这个。

<答案很简单：

1. 按照npm安装 material-ui ： npm install material -ui --save


2. 添加 resolve.moduleDirectories ， resolve.extensions


3. 通过<打开 jsx-loader 中的和声模式code> jsx-loader？和

最后的webpack.config.js我得到了它：

  var config = {
 entry：{
 Messenger：' ./app/Messenger.jsx'，
 AppComponent：'。/ app / AppComponent.jsx'
}，
 
 resolve：{
 modulesDirectories：['node_modules ']，
别名：{}，
扩展名：[''，'。jsx'，'。js'] 
}，
 
输出：{
路径：'。/ www'，
文件名：'[名称] .bundle.js'
}，
 
模块：{
 noP ass：[]，
加载器：[
 {test：/\ css$/,loader：'style-loader！css-loader'}，//使用！链接加载器
 {test：/\.png $ /，loader：url-loader？limit = 100000& mimetype = image / png}，
 {test：/\ .jsx$ /，loader：'jsx-loader？harmony'} 
] 
} 
}; 
 
 module.exports = config; 
  

I'm trying to use material-ui by webpack. However, I got the error message in chrome dev-tool

Uncaught ReferenceError: require is not defined

My 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;

I need some suggestions on how to require material-ui with webpack. Thanks.

解决方案

Finally, I got this.

The answer is quite simple:

1. Install material-ui by npm: npm install material-ui --save
2. Add resolve.moduleDirectories, resolve.extensions
3. Turn on harmony mode in jsx-loader by jsx-loader?harmony

The final webpack.config.js I got it:

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;

这篇关于正确的方法来通过webpack来获取材料-ui的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！