webpack无法识别.jsx文件扩展名

Question

在我们的项目中,我正在尝试重构所有组件以获得.jsx文件扩展名而不是.js.我的webpack.config.babel文件现在看起来像这样:

import fs from "fs"

const babelrc = JSON.parse(fs.readFileSync("./.babelrc"))

export default {
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        query: babelrc,
        exclude: /(node_modules|bower_components)/,
      },
      {
        test: /\.jsx$/,
        loader: "babel-loader",
        query: babelrc,
        exclude: /(node_modules|bower_components)/,
      },
      {
        test: /\.json$/,
        loader: "json-loader",
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      },
    ],
  },
}

但是,当我尝试import Main from './components/Main/Main'; 在我的client.js文件中运行时,它会显示给我

Module build failed: Error: ENOENT: no such file or directory, open '/foo/src/components/Main/Main.js'
 @ multi babel-polyfill webpack-dev-server/client?/ webpack/hot/dev-server ./src/client.js

我是babel和webpack的新手.我还需要注册jsx文件扩展名吗？

Answer 1

请查看以下文档resolve.extensions:https: //webpack.js.org/configuration/resolve/#resolve-extensions

您可以将以下内容添加到Webpack配置中,以.jsx通过在配置中添加以下内容来自动解析具有扩展名的文件:

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

_{顺便说一句,你也可以通过删除单独的.jsx加载器并为第一个加载器test来优化你的加载器配置/\.jsx?$/}