Question

我正在尝试加载多个.jsx文件以编译成一个。

现在，我们在同一目录中有app.jsx文件和home.jsx文件。我想使用webpack编译它们并将两个输出合并为一个文件。它现在编译为一个，但是home.jsx中的编译代码不是先导入的，所以路由不知道指向哪里。

我已经附加了app.jsx，home.jsx和webpac.config.js。请帮助：）

App.jsx

import React from "react";

var Router = require('react-router');
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Home = require('./home.jsx');

define(["./home.jsx"], function (){

})

App = React.createClass({
    render () {
        return (
            <div>
                <h1>Hire Monster App</h1>
                <RouteHandler/>
            </div>
        )
    }
});

var routes = (
    <Route handler={App}>
        <Route path="/" handler={mainPage}/>
        <Route path="login" handler={Home.jobs}/>
        <Route path="jobs" handler={Home.jobs}/>
    </Route>
);

Router.run(routes, Router.HashLocation, (Root) => {
    React.render(<Root/>, document.body);
});

home.jsx

import React from "react";
var mainPage;
module.exports = React.createClass({
      render: function () {
        return (
          <h1>Hello world!</h1>
        );
      }
    });

/*
module.export ={}
    var mainPage = React.createClass({
        render: function () {
            return <h1>Welcome!</h1>;
        }
    });

    var login = React.createClass({
        render: function () {
            return <h1>Login</h1>;
        }
    });

    var jobs = React.createClass({
        render: function () {
            return <h1>Jobs</h1>;
        }
    });
*/

webpack.config

module.exports = {
    entry: {
        bundle1:["./src/app.jsx","./src/home.jsx"]
    },
    output: {
        path: "../public/javascripts",
        filename: "hire.js"
    },
    module: {
        loaders: [
            { test: /\.jsx$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    }
}

Answer 1

需要考虑的几件事情。

为什么AMD风格define([])，特别是在您之前已经require()之前？
您在几个地方混合使用ES6模块格式和CommonJS模块格式。为了保持一致性，我建议如下：如果您使用import，则应使用export default代替module.exports，绝不使用require()或define()
通常，条目文件的概念是您用作<script>标记的单个入口点。只要该入口点包含import或require()到另一个文件，就应该包含它，并且不需要webpack.config.js内的其他配置。

具体建议：

首先您可以从配置中删除以下所有内容。

entry: {
    bundle1:["./src/app.jsx","./src/home.jsx"]
},
output: {
    path: "../public/javascripts",
    filename: "hire.js"
}

而是非常具体地使用webpack这样的电话：

webpack ./src/app.jsx --output-file ../public/javascript/hire.js

直到你绕过所有的配置选项，这可能是最简单的。

下一步完全删除define()来电。这不是必需的。

最后切换所有require()语句以使用import和module.exports至export default

一旦你这样做，如果它不起作用更新代码，我们将考虑它！

Webpack多个jsx编译设置

1 个答案:

需要考虑的几件事情。

具体建议：