如果文件名为jsx,webpack找不到模块

Question

正如我写这样的webpack.config.js

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  }
};

在index.jsx我导入一个react模块App

import React from 'react';
import { render } from 'react-dom';

import App from './containers/App';

let rootElement = document.getElementById('box')
render(
  <App />,
  rootElement
)

我发现如果我将模块app命名为App.jsx,那么webpack会说index.jsx无法找到模块App,但是如果我命名为命名模块app App.js,它会找到这个模块并且运行良好.

所以,我对此感到困惑.在我webpack.config.js,我已经写test: /\.jsx?$/了检查文件,但为什么命名*.jsx无法找到？

Answer 1

Webpack不知道.jsx隐式解析文件.您可以在app(import App from './containers/App.jsx';)中指定文件扩展名.您当前的加载程序测试表示在显式导入具有jsx扩展名的文件时使用babel加载程序.

或者,您可以.jsx在扩展中包含webpack应解决的内容,而无需明确声明:

module.exports = {
  entry: './index.jsx',
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  }
};

对于Webpack 2,请不要使用空的扩展名.

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

Answer 2

加上上面的答案,

您可以在resolve属性中添加您在应用程序中使用的所有文件类型.

假设您要使用.jsx或.es6文件; 你可以愉快地将它们包含在这里,webpack将解决它们:

resolve: {
  extensions: ["", ".js", ".jsx", ".es6"]
}

如果在resolve属性中添加扩展,则可以从import语句中删除它们:

import Hello from './hello'; // Extensions removed
import World from './world';

其他情况,例如,如果您想要检测咖啡脚本,您应该配置您的测试属性,如:

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'       
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: 'coffee-loader' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.coffee')
    extensions: ['', '.js', '.json', '.coffee'] 
  }
};

Answer 3

为了可读性和复制粘贴编码.这是来自罗杰斯先生的webpack 4回答.

module: {
  rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      resolve: {
        extensions: [".js", ".jsx"]
      },
      use: {
        loader: "babel-loader"
      }
    },
  ]
}

Answer 4

As mentioned in the comments on the answer from @max, for webpack 4, I found that I needed to put this in one of the rules that were listed under module, like so:

{
  module: {
    rules: [ 
      {
        test: /\.jsx?$/, 
        resolve: {
          extensions: [".js", ".jsx"]
        },
        include: ...
      }
    ]
  }
}