Webpack 2：你可能需要一个合适的加载器来处理这个文件类型 React答案

【问题标题】：Webpack 2 : You may need an appropriate loader to handle this file type ReactWebpack 2：你可能需要一个合适的加载器来处理这个文件类型 React
【发布时间】：2017-02-12 21:07:37
【问题描述】：

我已多次检查我的配置和软件包，但无法弄清楚发生了什么。似乎 webpack 忽略了我的 babelrc 文件，但我也尝试在我的配置中使用 presets 选项，但仍然无法让它转换 React。使用 babel cli 从命令行执行它可以正常工作：

webpack.config.js

var path = require('path');

const config = {
    entry: './frontend/app.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js || jsx)$/,
                use: 'babel-loader',
                include: path.resolve(__dirname, 'frontend')
            }
        ],
    }
};



module.exports = config;

.babelrc

{
  "presets": [
    ["es2015", {"modules": false}],
    "react",
    "stage-0"
  ],

  "plugins": [
    ["module-resolver", {
      "root": ["./frontend"],
      "alias": {
        "actions": "actions",
        "components": "components",
        "reducers": "reducers",
        "stores": "stores",
        "utils": "utils"
      }
    }]
  ],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

package.json

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "./frontend/app.js",
  "scripts": {
    "test": "jest",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.14.1",
    "fetchr": "^0.5.36",
    "fluxible": "^1.2.0",
    "fluxible-action-utils": "0.2.4",
    "fluxible-addons-react": "0.2.8",
    "fluxible-reducer-store": "^0.1.0",
    "immutable": "^3.8.1",
    "keymirror": "^0.1.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^3.0.2"
  },
  "devDependencies": {
    "babel": "^6.5.2",
    "babel-cli": "^6.22.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-module-resolver": "^2.5.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.22.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "jest": "^18.1.0",
    "webpack": "^2.2.1"
  }
}

【问题讨论】：

标签： reactjs webpack babeljs

【解决方案1】：

/\.(js || jsx)$/

不是正则表达式的工作方式。你的意思是

/\.(js|jsx)$/

【讨论】：

哇，我智障了。这就是我复制和粘贴正则表达式所得到的
这个更简洁一点：/\.jsx?$/
是的，各种选项。我只是保持它与原版相似。