Webpack 多个 jsx 编译设置答案

【问题标题】：Webpack multiple jsx compile settingWebpack 多个 jsx 编译设置
【发布时间】：2015-10-07 05:15:15
【问题描述】：

我正在尝试加载多个 .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" }
        ]
    }
}

【问题讨论】：

标签： reactjs webpack react-router

【解决方案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

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

【讨论】：