2017-04-14 98 views
1

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

从webpack.base.config.js

error 2

回答

3

webpack.base.config.js => JSX语法错误,我想那是不正确的设置

你能分享你的.babelrc吗?

通常,这个文件如下。

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

将尽快检查! –