Webpack使用React的问题

Question

对不起，如果这是一个重复的问题。 我似乎无法解决这个问题或找到答案。 我有一个基本的Webpack设置，我正在与React和Django一起工作。 基本上我在使用webpack时遇到了编译错误。

这两个webpack文件在下面都没有正确加载，这个App模块也没有（我认为它是redux的提供程序组件）。

我认为这可能与司机有关 - 或者是我错过的非常简单的事情。 我真的很感激帮助，因为我一直试图解决这个问题很长一段时间哈哈！

谢谢！！！

webpack.config.local.config.js

    var path = require("path")
    var webpack = require('webpack')
    var BundleTracker = require('webpack-bundle-tracker')

    var ip = 'localhost'
    var config = require('./webpack.base.config.js')

    config.devtool = "#eval-source-map"

    config.entry = {
        App1: [
            'webpack-dev-server/client?http://' + ip + ':3000',
            'webpack/hot/only-dev-server',
            './reactjs/App1',
        ],
    }

    config.output.publicPath = 'http://' + ip + ':3000' + '/assets/bundles/'

    config.plugins = config.plugins.concat([
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new BundleTracker({filename: './webpack-stats-local.json'}),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development'),
                'BASE_API_URL': JSON.stringify('https://'+ ip +':3000/api/v1/'),
            }}),
    ])

    config.module.loaders.push(
        { test: /\.js?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel'] }
    )

    module.exports = config

webpack.base.config.js

var path = require("path")
var webpack = require('webpack')

module.exports = {
    context: __dirname,

    entry: {
        // Add as many entry points as you have container-react-components here
        App1: './reactjs/App1',

        vendors: ['react']
    },

    output: {
        path: path.resolve('./djreact/static/bundles/local/'),
        filename: "[name]-[hash].js"
    },

    externals: [
    ], // add all vendor libs

    plugins: [
        new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    ], // add all common plugins here

    module: {
        loaders: [
            // js
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loaders: ['babel'],
                presets: ['es2015', 'react'],
            },
            //    PNG
            {
                test    : /\.(png|jpg|svg)$/,
                include : path.join(__dirname, 'img'),
                loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
            },
            {
                test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                loader: 'file-loader'
            },


            // CSS
            {
                test: /\.scss$/,
                include: path.join(__dirname, 'client'),
                loader: 'style-loader!css-loader!sass-loader'
            }
        ] // add all common loaders here
    },

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

有一些错误的应用程序

App1.js

import React from "react"
import { render } from "react-dom"
import {
    createStore,
    compose,
    applyMiddleware,
    combineReducers,
} from "redux"
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import { Provider } from "react-redux"
import thunk from "redux-thunk"

import * as reducers from "./reducers"
import App1Container from "./containers/App1Container"

let finalCreateStore = compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore)
let reducer = combineReducers(reducers)
let store = finalCreateStore(reducer)

class App1 extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <Router history = {hashHistory}>
                    <Route path="/" component={Layout}>
                        <IndexRoute component = {App1Container}/>
                    </Route>
                </Router>
                <App1Container />
            </Provider>
        )
    }
}

render(<App1/>, document.getElementById('App1'))

所以这里是错误。

来自webpack.local.config.js

来自webpack.base.config.js

Answer 1

webpack.base.config.js => jsx语法错误，我认为这是错误的babel设置

你能分享你的.babelrc吗？

通常，此文件如下。

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