我正在尝试通过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的建议。谢谢。
最后,我明白了。
答案很简单:
material-ui
通过npm安装:npm install material-ui --save
resolve.moduleDirectories
,resolve.extensions
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;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句