使用此webpack.config.js
:
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// autoprefixer configuration based on Bootstrap 4.x defaults
const autoprefixerBrowsers = require('bootstrap/grunt/postcss').autoprefixer.browsers;
const path = require('path');
module.exports = {
entry: [
// Set up an ES6-ish environment
'babel-polyfill',
"./entry.js",
],
output: {
path: __dirname,
filename: "bundle.js"
},
eslint: {
configFile: './.eslintrc'
},
module: {
preLoaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
],
loaders: [
{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'entry.js')
],
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
// Options to configure babel with
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'react'],
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
},
{
test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?/,
loader: 'url'
}
]
},
plugins: [
new ExtractTextPlugin('./style.css', {
allChunks: true
}),
new webpack.ProvidePlugin({
'jQuery': 'jquery',
'window.jQuery': 'jquery',
'Tether': 'tether',
'window.Tether': 'tether'
})
],
postcss: function () {
return [
require('postcss-flexbugs-fixes'),
require('autoprefixer')({browsers: autoprefixerBrowsers})
];
}
};
有这样的结构:
- src
- course
- Courses.jsx
- CourseList.jsx
- index.js
这是index.js
:
import React from 'react'
import {render} from 'react-dom'
import configureStore from './store/configureStore';
import {Provider} from 'react-redux';
import App from './app.jsx'
import About from './about.jsx'
import Courses from './course/Courses';
import {loadCourses} from './actions/courseActions';
import {Router, Route, hashHistory} from 'react-router'
const store = configureStore();
store.dispatch(loadCourses());
render(
<Provider store={store}>
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/about" component={About}/>
<Route path="/courses" component={Courses}/>
</Route>
</Router>
</Provider>
, document.getElementById('root'));
Courses.jsx
:
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as courseActions from '../actions/courseActions';
import CourseList from './CourseList';
class CoursesPage extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
const {courses} = this.props;
return (
<div>
<h1>Courses</h1>
<CourseList courses={courses}/>
</div>
);
}
}
function mapStateToProps(state, ownProps) {
return {
// state.courses = rootReducer.courses
courses: state.courses
}
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(courseActions, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(CoursesPage);
CourseList.jsx
:
import React from 'react';
import CourseListRow from './CourseListRow';
const CourseList = ({courses}) => {
return (
<table>
<thead>
<tr>
<th> </th>
<th>Title</th>
<th>Author</th>
<th>Category</th>
<th>Length</th>
</tr>
</thead>
<tbody>
{courses.map(course =>
<CourseListRow key={course.id} course={course}/>
)}
</tbody>
</table>
)
};
export default CourseList;
运行webpack
时,出现此错误:
Module not found: Error: Cannot resolve 'file' or 'directory' ./CourseList in /Users/alex/src/hellowebpack/src/course
@ ./src/course/courses.js 39:18-41
将我的.jsx
个文件扩展名重命名为.js
时,它可以正常工作。
答案 0 :(得分:0)
将resolve
添加到您的webpack.config.js
resolve: {
extensions: ['', '.js', '.jsx', '.json'],
packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main'],
}
extensions
标记将允许您不包含扩展名。请注意,您这样做:import CourseListRow from './CourseListRow';
。这意味着您需要添加resolve
,以便解析扩展程序。