javascript - Webpack 错误无法解析 JSX

Question

我在 Cloud9 (Linux) 上构建代码时遇到了这个问题

>

   http://localhost:8080/webpack-dev-server/
>         webpack result is served from /
>         content is served from ./
>         404s will fallback to /index.html
>         Hash: 126cd080ff3d14fea7af
>         Version: webpack 2.4.1
>         Time: 657ms
>             Asset     Size  Chunks             Chunk Names
>         bundle.js  3.77 kB       0  [emitted]  main
>         chunk    {0} bundle.js (main) 1.05 kB [entry] [rendered]
>             [0] ./src/index.js 1.02 kB {0} [built] [failed] [1 error]
>             [1] multi ./src/index.js 28 bytes {0} [built]
>         
>         ERROR in ./src/index.js
>         Module build failed: SyntaxError: Unexpected token (29:16)
>         
>           27 | }
>           28 | 
>         > 29 | ReactDOM.render(<Provider store={store}>
>              |                 ^
>           30 |     <Router history={browserHistory}>
>           31 |       <Route path="/" component={App}>
>           32 |         <IndexRoute component={Welcome} />
>         
>          @ multi ./src/index.js
>         webpack: Failed to compile.

将 webpack 升级到较新版本后，我收到此错误。版本:
"webpack": "^2.4.1",
“webpack-dev-server”:“^1.14.0”
不太确定问题是什么。这是 webpack 配置:

module.exports = {   entry: [
'./src/index.js'   ],   output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'   },   module: {
rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
       options: {
        presets: [
          ["es2015", { "modules": false }]
        ]
       }
  },
  {
    test: /\.scss$/,  // regex to select only .css files
    use: [
      {
       loader: "style-loader"
      },
      {
       loader: "css-loader",
       options: {
         modules: true
       }
      },
      {
        loader:"sass-loader"
      }
    ] // loader: 'style-loader!css-loader!sass-loader'          
  }
] // the sass-loader converts the sass into css, the css-loader puts that css into the JS, the style-loader puts the javascript into the DOM.   },   resolve: {
extensions: [ '.js', '.jsx', '.css'],
modules: [
  "node_modules"
]    },   devServer: {
historyApiFallback: true,
contentBase: './'   } };

问题是 Sass-loader 与旧版本的 Webpack(版本<2)不兼容。

编辑我现在正在尝试使用旧版本的 Webpack 1.15.0 并删除了 Sass-loader，但仍然遇到同样的问题

Answer 1

在 webpack.config.js 中使用它

module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015','stage-1']       
                }
            }
        ]
    }