Question

好的，所以我遇到了React的问题。所以我创建了一个NavBar组件，并将它以JSX格式保存在＆＃39; home.js＆＃39;它在我的index.html中完美呈现。现在，我想创建一个＆＃34;登录＆＃34;组件，但我在创建新的＆＃39; login.js＆＃39;之后不久就意识到了。文件，Webpack不能＆＃34;看＆＃34;这个文件所以没有编译。我发现这是因为我没有告诉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入口点应该是登录名。导入将确保您的Navbar也被拉入。

我希望能给你这个想法。我没有你的代码所以我无法帮助超越这个

Answer 2

您可以将条目设置为对象，然后传递您需要的所有文件。我这样做

module.exports = {

  resolve: {
    modulesDirectories: ['./node_modules', './resources/assets/scripts']
  },

  entry: {
   main: './resources/js/main.js',
   component: './resources/js/component.js'
   // etc, etc
  },

  output: {
    path: path.join(__dirname, 'public/assets/js'),
    filename: '[name].min.js'
  },

}

如果您的入口点文件需要一些依赖，例如jQuery，您可以这样做。

withDeps: ['jquery', './resources/js/withDeps.js']

Webpack配置 - 添加另一个条目文件

2 个答案: