您可能需要適當的加載器才能通過babel / webpack2 / react處理此文件類型

Question

我目前正在嘗試使webpack 2與babel配合使用並做出反應。

這是我的webpack.config.js：

'use strict';

module.exports = [
  {
    entry: './src/client/app/private.jsx',
    output: {
      path: './',
      filename: './src/client/private/bundle.js'
    },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    module: {
      rules: [
        {
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['es2015', { modules: false }],
                  ['es2016', { modules: false }],
                  'react'
                ],
              }
            },
          ],
          exclude: /node_modules/
        }
      ]
    }
  }
];

.babelrc：

{
  "presets": [
    "es2015",
    "es2016",
    "react"
  ],
  "plugins": [
    "transform-react-jsx",
    "transform-regenerator"
  ]
}

錯誤：

ERROR in ./src/client/app/private.jsx
Module parse failed: /home/karl/dev/node/project/src/client/app/private.jsx Unexpected token (7:16)
You may need an appropriate loader to handle this file type.
| import Index from './containers/Index/index.jsx';
| 
| ReactDOM.render(<Index />, document.getElementById('root'));

Answer 1

我的建議是克隆此入門程序： https : //github.com/alicoding/react-webpack-babel ，然后識別差異。 另外，不確定是否像刪除module.exports中的方括號一樣簡單，但是我之前從未見過。 通常只是

module.exports = {
    //...
}

Answer 2

您已省略規則的測試屬性

rules: [
  {
    test: /\.jsx$/,
    use: [
      {
        loader: 'babel-loader',
        /*
          your loader options
        */
      },
    ],
    exclude: /node_modules/
  }
]

這可能是主要問題，但您可能還需要考慮其他問題：

在output屬性上，應將path用作輸出包的路徑，而filename僅將bundle的名稱用作filename名，這表明。

output: {
  path: path.resolve(__dirname, src/client/private),
  filename: 'bundle.js'
},

您還必須從resolve.extensions刪除空字符串'' 。 在webpack 2中，不再需要它。

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

如果要為不同目標導出多個配置，則可以使用一組配置對象，否則應導出單個配置對象。

module.exports = {
...
}

您可以在此處找到有關遷移到v2的更多信息： 從v1遷移到v2