Question

这是我的webpack.config文件

import webpack from 'webpack'
import path from 'path'

export default {
devtool: 'inline-source-map',

entry: [
    path.resolve(__dirname, 'src/index.js')
],
target: 'web',
output: {
    path: path.resolve(__dirname, 'src'),
    publicPath: '/',
    filename: 'bundle.js'
},
resolve: {
   extensions: ['.js', '.jsx']
 },
module: {
    loaders: [{
        test: /\.(js|jsx)$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
            presets: ['es2015', 'react']
        }
    }]
}
};

这是我的package.json文件

{
      "name": "zresume",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "nodemon server/server.js --exec babel-node"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "bootstrap": "^3.3.7",
        "d3": "^4.10.2",
        "express": "^4.15.4",
        "nodemon": "^1.12.0",
        "path": "^0.12.7",
        "react": "^15.6.1",
        "react-bootstrap": "^0.31.3",
        "react-dom": "^15.6.1",
        "react-router": "^4.2.0",
        "redux": "^3.7.2"
      },
      "devDependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-react-hmre": "^1.1.1",
        "open": "0.0.5",
        "webpack": "^3.6.0",
        "webpack-dev-middleware": "^1.12.0"
      },
      "babel": {
        "presets": [
          "es2015"
        ],
        "env": {
          "presets": [
            "react-hmre"
          ]
        }
      }
    }

我的index.js文件

import React from 'react';
    import ReactDOM from 'react-dom';
    import LoginPage from './components/LoginPage';

    class App extends React.Component {
        render(){
            return(
                <div>
                    <h1>El Juego Lindo</h1>
                    <div>
                    <LoginPage />
                    </div>

                </div>
            );
        }
    }

    ReactDOM.render(<App />, document.getElementById('root'));

LoginPage组件

import React from 'react';
    import { Button, Collapse } from 'react-bootstrap';
    import LoginForm from './LoginForm';

    class LoginPage extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              onButtonClicked: false
          }
          this.onButtonClick = this.onButtonClick.bind(this);
      }

      onButtonClick() {
          this.setState({
              onButtonClicked: !this.state.onButtonClicked
          });
      }

     render() {
       return (
         <div>
         <div> I love football!!!! </div>
         <Button className="footballButton" onClick={this.onButtonClick} bsStyle="primary" bsSize="large" block>Football Lover</Button>
         <Collapse in={this.state.onButtonClicked}>
           <div>
             <LoginForm />
           </div>
         </Collapse>
         </div>
       );
     } 


    }

    export default LoginPage;

enter image description here

大家好我是一个非常新手的程序员，而且我的反应组件渲染有问题。由于某种原因，它说它无法找到模块。任何人都可以指导我朝正确的方向发展吗？

Answer 1

您应该为文件命名＆＃34; .js＆＃34;，而不是＆＃34; .jsx＆＃34;

如果必须使用＆＃34; .jsx＆＃34;，则需要指定导入时结束的文件：

import LoginPage from './components/LoginPage.jsx'

否则，Webpack假设您已经使用了＆＃34; .js＆＃34;

Answer 2

Webpack 3存在问题，您必须向接受的扩展程序添加blank space，如下所示。

resolve: {
    extensions: [' ', '.js', '.jsx']

但我还建议添加别名以避免使用.（点）导入组件，并删除以前的解决方法

resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
      'Components': path.resolve(__dirname, '/components')
    }      
}

现在您可以像这样导入您的组件

import YourComponent from 'Components/Login'

https://github.com/webpack/webpack/issues/981

另外，请检查babel-node是否存在ES6模块自动加载问题https://babeljs.io/docs/usage/cli/#babel-node

未捕获错误：找不到模块＆＃34; ./ components / LoginPage＆＃34;

2 个答案: