2017-04-14 8 views
1

これは重複した質問です。私はこれを解決したり、答えを見つけることができません。私はReactとDjangoと一緒に作業しているWebpackの基本的な設定をしています。基本的には、webpackを使用するときにコンパイルエラーが発生します。Webpack with Reactを使用した問題

これらの2つのWebpackファイルは正しくロードされていません。以下の両方とも、このAppモジュールはどちらもありません(私はそれがreduxのプロバイダコンポーネントだと思います)。

私はそれがドライバーと何かになるかもしれないと思っています。私はこれを長らく解決しようとしていたので、本当に助けてくれてありがとう!

ありがとうございました!

webpack.config.local.config.js多少の誤差を

App1.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'] 
    }, 
} 

アプリ

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.base.config.js

error 2

答えて

3

webpack.base.config.js => JSX構文エラーからwebpack.local.config.js error

から

、私は思いますそれは間違ったバーベル設定です

あなたは.babelrcを共有できますか?

通常、このファイルは次のとおりです。

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

これをできるだけ早くチェックしてください! –

関連する問題