在webpack react应用程序中创建一个测试入口点

Question

tldr:我能够require运行应用程序的所有内容,但如果我require在测试中的模块(在应用程序中 - 参见下面的dir结构)文件中,整个依赖关系链就会中断.

我在require我的app/test目录(在我的webpack React.js应用程序中)有一些困难的组件,我没有任何困难 - require从文件/app夹中的任何其他文件.这是目录结构

app
  /components/checkout.jsx
  /components/button.jsx
  /test/test.js 
  index.jsx  
dist
node_modules
webpack.config.js
package.json

在我的webpack.config.js中,我设置为像我这样使用jsx-loader作为我的React应用程序

entry: {
   app: "./app/index"
},
module: {
   loaders: [
        {
             test: /\.jsx$/,
             loader: 'jsx-loader?insertPragma=React.DOM&harmony',
     }
  ]
},
resolve: {
 extensions: ['', '.js', '.jsx']
}

这允许我要求以扩展名.jsx结尾的文件.例如,在/app/index.jsx我要求/app/components/checkout.jsx的时候

 var Checkout = require('./components/Checkout')

在里面/app/components/checkout.jsx,我需要按钮

var Button = require('./components/Button')

因此,当我需要Checkout来自index.jsx时,它处理Button的要求没有任何问题.

但是,从app/test/test.js,我做到了

var Checkout = require('../components/Checkout')

和webpack找不到Checkout组件.当我在webpack dev服务器中查看测试时,它没有显示查找.jsx文件扩展名.它搜索了

 app/components/Checkout
 app/components/Checkout.webpack.js
 app/components/Checkout.web.js
 app/components/Checkout.js
 app/components/Checkout.json

因此,我试着jsx-loader像这样使用内联

 var Checkout = require(jsx-loader!'../components/Checkout')

从测试目录,webpack现在可以找到该文件,但它会抛出一个错误,说它无法解析Checkout的Button requires.换句话说,当我require在app/test文件夹中使用from时,整个依赖链被抛出不同步.

如何更改我的webpack.config.js以便能够在我的测试中使用此目录结构来要求应用程序文件,或者更一般地说,如何配置webpack以在测试中要求应用程序文件？

更新

项目结构

/app
  /test/test.js
  /index.jsx
  /components/checkout.jsx (and button.jsx)
/dist
/node_modules
package.json
webpack.config.js

整个webpack配置

var webpack = require('webpack');
module.exports = {
    context: __dirname + "/app",
    entry: {
      vendors: ["d3", "jquery"],
      app: "index"
      // app: "./app/index"

      },
    output: {
        path: './dist',
        filename: 'bundle.js', //this is the default name, so you can skip it
        //at this directory our bundle file will be available
        //make sure port 8090 is used when launching webpack-dev-server
        publicPath: 'http://localhost:8090/assets/'
    },

    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable

        'react': 'React'
        // 'd3': 'd3'
    },
    resolve: {
        modulesDirectories: ['app', 'node_modules'],
        extensions: ['', '.js', '.jsx'],
        resolveLoader: { fallback: __dirname + "/node_modules" },
        root: ['/app', '/test']
    },
    module: {
        loaders: [
            {
              test: /\.jsx$/, 
              loader: 'jsx-loader?insertPragma=React.DOM&harmony',
            }
        ]
    },

    plugins: [
    // definePlugin,
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')

    ]
}

Answer 1

一种可能的解决方案是始终要求文件扩展名：

var Checkout = require('./components/Checkout.jsx')