webpack配置不适用于node.js中的require（）

Question

I have a file call abc.jsx like this

var MyTitle = require('./MyTitle')

but I have to do require('./MyTitle)

coz I run webpack it throw me error.

ERROR in ./js/MyTitle.jsx
Module not found: Error: Cannot resolve 'file' or 'directory' ./MyTitle in /Users/username/Documents/intro-to-react/js
 @ ./js/MyTitle.jsx 5:14-34

Answer 1

You should have set webpack config to resolve jsx file using babel-loader. The following line test: /\\.js?$/, in module loader tells webpack to resolve both .js and .jsx file types.

var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: "inline-sourcemap",
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy'], 
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  }
};