javascript - Webpack 配置 - 添加另一个入口文件

Question

好的，我在 React 方面遇到了问题。因此，我创建了一个 NavBar 组件，并将其以 JSX 形式保存在“home.js”中，并且它在我的 index.html 中完美呈现。 现在，我想创建一个“登录”组件，但在创建新的“login.js”文件后不久，我意识到 Webpack 无法“查看”该文件，因此无法对其进行编译。 我发现这是因为我没有告诉 Webpack 配置来编译这个新文件，我尝试了很多不同的方法，但我无法让 Webpack 编译这两个文件。 任何帮助将不胜感激。

查看下面我的 Webpack 配置:

var path = require('path');
var srcPath = path.join(__dirname, 'src');
var buildPath = path.join(__dirname, 'dist');

module.exports = {
  context: srcPath,
  entry: path.join(srcPath, 'js', 'home.js'),
  output: {
      path: buildPath,
      filename: "bundle.js"
  },
  module: {
      loaders: [
          {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel',
            query: {
              presets: ['react', 'es2015']
            }
          }
      ]
  }
};

Answer 1

我没有您的代码示例，但我希望这个解释有效。使用导出和导入来定义文件的依赖关系。

例如

navbar.js

export class Navbar{
    // Write your component here
}

login.js

var Navbar = require('./navbar');

export class Login{
    // Write your Login component here
    // You can also use your navbar component here since it is imported
}

您的 webpack 入口点应该是登录名。导入将确保您的导航栏也被拉入。

我希望这能给你带来启发。我没有你的代码，所以我无法提供除此之外的帮助