的WebPack：錯誤錄入模塊未發現：錯誤：無法解析 '文件' 或 '目錄' .jsx

Question

使用此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>&nbsp;</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它的工作原理。

Answer 1

添加resolve您webpack.config.js

resolve: { 
    extensions: ['', '.js', '.jsx', '.json'], 
    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main'], 
} 

的extensions標籤可以讓你不包括擴展名。注意你正在這樣做：import CourseListRow from './CourseListRow';。這意味着您需要添加resolve，以便解析擴展。