Question

您好我正在阅读this教程，并根据this教程设置了我的webpack配置。

无论我有以下文件index.js

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import AppComp from './components/App' 

let store = createStore(todoApp)

let App = React.createClass({
  render: () => {
    return (
      <Provider store={store}>
        <AppComp />
      </Provider>
    )
  }
});

render(
  <App/>,
  document.getElementById('app')
)

我的webpack配置是

var HtmlWebpackPlugin = require ('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'index_build.js'
    },

    module: {
        loaders: [
            { 
                test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', presets: ['es2015', 'react']  
            },
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
};

当我使用webpack运行应用程序时，出现以下错误

ERROR in ./app/index.js
Module build failed: SyntaxError: Unexpected token (13:6)

  11 |   render: () => {
  12 |     return (
> 13 |       <Provider store={store}>
     |       ^
  14 |         <App />
  15 |       </Provider>
  16 |     )

任何人都可以帮我解决此错误吗？

编辑：问题是我定义我的webpack配置的方式，预设应该在查询块内。这是我更新的webpack配置文件

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      { 
          test: /\.js$/, 
          exclude: /node_modules/, 
          loader: 'babel-loader',
          query: {
            presets: ['react', 'babel-preset-react']
          } 
      }
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

Answer 1

您必须指定babel预设。您可以使用.babelrc

{
  "presets": [
  "react",
  "es2015"
 ]
}

或者您可以在加载程序查询中指定它：

loaders: [ 'babel?presets[]=react,presets[]=es2015' ]

Answer 2

您需要使用npm模块＆＃39;路径＆＃39;用于定义路径。这是webpack.config.js文件

    var HtmlWebpackPlugin = require ('html-webpack-plugin');
    var path = require('path');
    var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
        template: __dirname + '/app/index.html',
        filename: 'index.html',
        inject: 'body'
    });

    module.exports = {
        entry: [
            './app/index.js'
        ],
        output: {
            path: path.resolve(__dirname, 'dist/'),
            filename: 'index_build.js'
        },

        module: {
            loaders: [
                { 
                    test: /\.js$/, include: path.join(__dirname,'/app'), loader: 'babel-loader', presets: ['es2015', 'react']  
                },
            ]
        },
        plugins: [HtmlWebpackPluginConfig]
   };

发布使用webpack运行react-redux

2 个答案: