javascript - 尽管设置了解析，Webpack 也不会解析没有 .jsx 扩展名的模块

Question

如果我将 .jsx 添加到 require('./StringOption') 它可以工作，但我认为我的 webpack 的 resolve 部分。 config.js 应该允许我在没有扩展名的情况下要求。我做错了什么？

另外，当 ./ 与 index.jsx 位于同一目录时，为什么我需要 infront？

运行webpack后报错信息:

ERROR in ./src/index.jsx
Module not found: Error: Cannot resolve module 'StringOption' in /Users/Mike/packages/chrome-extension-options/src
 @ ./src/index.jsx 5:19-42

index.js:

'use strict'

var React = require('react')
var ReactDOM = require('react-dom')
var StringOption = require('./StringOption');

ReactDOM.render(<StringOption id="test" name="Test" />, document.getElementById('content'))

webpack.config.js 文件:

var path = require("path");

module.exports = {
    entry: './src/index.jsx',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'index.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'jsx-loader',
                exclude: /node_modules/
            }
        ]
    },
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    },
    resolve: {
        extensions: ['', '*.js', '*.jsx']
    }
};

目录结构:

- src/
  - index.jsx
  - StringOption.jsx
- dist/
  - index.js
  - react.js
  - react-dom.js

Answer 1

首先 ./StringOption 说它应该在同一个目录中搜索。不像其他地方我们需要指定从哪里我们需要在 react jsx 中导入一个文件。

其次，

在 resolve 中，你不需要显式使用 resolve，只需使用 babel-loader 或者使用 resolve as

resolve: {
    extensions: ['', '.js', '.jsx']
}

或

module: {
        loaders: [
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }