これは重複した質問です。私はこれを解決したり、答えを見つけることができません。私は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
これをできるだけ早くチェックしてください! –