最近看了一本书《Survive JS - Webpack and React》,里面的例子都是用ES6的方式写的,
import React from ‘react’;
export default class Notes extends React.Component {
…
}
这种,
webpack.config.js如下:
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var merge = require('webpack-merge');
var TARGET = process.env.npm_lifecycle_event;
var ROOT_PATH = path.resolve(__dirname);
var common = {
entry: path.resolve(ROOT_PATH, 'app/main.jsx'),
output: {
path: path.resolve(ROOT_PATH, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css'],
include: path.resolve(ROOT_PATH, 'app')
}
]
},
plugins: [
new HtmlwebpackPlugin({
title: 'Kanban app'
})
]
};
if (TARGET === 'start' || !TARGET) {
module.exports = merge(common, {
devtool: 'eval-source-map',
module: {
loaders: [
{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.resolve(ROOT_PATH, 'app')
}
]
},
devServer: {
colors: true,
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
});
}
现在的问题是,比如我要用其他第三方的库,比方说react-widgets,但是它不是这种风格的,是用require来载入的,那么我怎么样才能兼容这种第三方组件库来使用呢?
我一使用
import ‘react-widgets/dist/css/react-widgets.css’;
就说webpack-dev-server
node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81
r.forEach(function(r) {
^
TypeError: undefined is not a function