Webpack 2：您可能需要適當的加載器來處理此文件類型React

Question

我已經多次檢查了我的配置和程序包，但無法弄清楚是什么情況。 似乎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"
  }
}

Answer 1

/\.(js || jsx)$/

不是正則表達式的工作原理。 你的意思是

/\.(js|jsx)$/