Uncaught ReferenceError：エクスポートが定義されていません

Question

webappを使用してWebアプリケーション（React + ES6）をバインドしてパッケージ化しようとしています。しかし、webpack-dev-serverを実行してページを取得するたびにbundle.js:1 Uncaught ReferenceError: exports is not defined私は間違っていますか？ここで

は私のWebPACKの構成である：ここで

var webpack = require('webpack'); 

module.exports = { 
    entry : [ 
     './lib/index.js' 
    ], 
    output : { 
     path : __dirname + '/dist/', 
     libraryTarget: 'commonjs', 
     filename : 'bundle.js' 
    }, 
    plugins : [ 
     new webpack.NoErrorsPlugin() 
    ], 
    devtool: 'eval', 
    module : { 
     loaders : [ 
      { 
       test : /\.js$/, 
       loaders : [ 
        'react-hot', 
        'babel' 
       ], 
       exclude : /node_modules/ 
      }, 
      { 
       test : /\.(jpe?g|png|gif|svg)$/i, 
       loaders : [ 
        'url?limit=8192', 
        'img' 
       ] 
      }, 
      { 
       test : /\.scss$/, 
       include : /styles/, 
       loaders : [ 
        'style', 
        'css', 
        'sass' 
       ] 
      } 
     ] 
    }, 
    resolve : { 
     extensions : ['', '.js', '.json'] 
    }, 
    externals : ['request'] 
}; 

は私のpackage.jsonは

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

.babelrc

{ 
... 
"dependencies": { 
    "babel-core": ": ^6.0.0", 
    "lodash": ": ^4.6.0", 
    "react-dom": ": ^0.14.0", 
    "react-redux": ": ^4.0.0", 
    "react": ": ^0.14.0", 
    "redux-devtools": ": ^2.1.5", 
    "redux-thunk": ": ^1.0.0", 
    "redux": ": ^3.0.4", 
    "request": ": ^2.69.0" 
}, 
"devDependencies": { 
    "babel-loader": ": ^6.1.0", 
    "babel-preset-es2015": ": ^6.6.0", 
    "babel-preset-react": ": ^6.5.0", 
    "css-loader": ": ^0.23.0", 
    "file-loader": ": ^0.8.4", 
    "gulp": "^3.9.1", 
    "gulp-babel": "^6.1.2", 
    "img-loader": ": ^1.2.0", 
    "node-sass": ": ^3.2.0", 
    "react-hot-loader": ": ^1.3.0", 
    "sass-loader": ": ^3.1.2", 
    "style-loader": ": ^0.13.0", 
    "webpack": ": ^1.12.9", 
    "webpack-dev-server": ": ^1.14.1" 
}, 
... 
} 

のWebPACK-devのサーバー

var webpack = require('webpack'), 
    WebpackDevServer = require('webpack-dev-server'), 
    config = require('../webpack.config.js'); 

new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    historyApiFallback: true 
}).listen(8081, 'localhost', function (err, result) { 
    if (err) { 
     console.log(err); 
    } 

    console.log('Listening at localhost:8081'); 
}); 

です

gulpfile

var gulp = require('gulp'), 
    babel = require('gulp-babel'); 

gulp.task('babel', function() { 
    return gulp.src('src/**/*.js').pipe(babel({ 
     presets : ['es2015', 'react'] 
    })).pipe(gulp.dest('lib')); 
}); 

gulp.task('default', ['babel']); 

Answer 1

もう一度最初からやり直してみました。私はガルプを扱う全てを取り除き、ローダーを通してすべてをやりました。また、requestはwebpackと一緒に遊ぶのが好きではないので、その依存関係をすべて削除したようです。私もパスを調整しました。それは今働きます！ここで

は私のWebPACKです：ここ

var webpack = require('webpack'), 
    path = require('path'); 

module.exports = { 
    entry : { 
     'name' : './src/index.js' 
    }, 
    output : { 
     path : path.join(__dirname, 'dist'), 
     publicPath : '/assets/', 
     filename : '[name].bundle.js' 
    }, 
    plugins : [ 
     new webpack.NoErrorsPlugin() 
    ], 
    devtool : 'source-map', 
    module : { 
     loaders : [ 
      { 
       test : /\.js$/, 
       loaders : [ 
        'react-hot', 
        'babel' 
       ], 
       include : path.join(__dirname, 'src') 
      }, 
      { 
       test : /\.(jpe?g|png|gif|svg)$/i, 
       loaders : [ 
        'url?limit=8192', 
        'img' 
       ] 
      }, 
      { 
       test : /\.scss$/, 
       include : path.join(__dirname, 'styles'), 
       loaders : [ 
        'style', 
        'css', 
        'sass' 
       ] 
      } 
     ] 
    }, 
    resolve : { 
     extensions : [ 
      '', 
      '.js', 
      '.json', 
      '.sass' 
     ] 
    } 
}; 

が私のサーバーで、ここで

var webpack = require('webpack'), 
    WebpackDevServer = require('webpack-dev-server'), 
    config = require('../webpack.config.js'); 

new WebpackDevServer(webpack(config), { 
    publicPath : config.output.publicPath, 
    inline : true, 
    hot : true, 
    historyApiFallback : true 
}).listen(8081, 'localhost', function (err, result) { 
    if (err) { 
     console.log(err); 
    } 

    console.log('Webpack-dev-server started successfully!'); 
    console.log('----------------------------------------'); 
    console.log('Listening at localhost: 8081\n'); 
}); 

は私babelrcは私を持っているでしょう `&&`に関する先端のための

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

Answer 2

スクリプトや依存関係には何のWebPACK-devのサーバーはありません。 ノードでファイルを提供しており、ビルドに依存する場合は "start"： "npm run build & npm run server"コマンドを同時に実行すると、ビルドが完了する前にアプリが提供されていることがわかります。これは代わりに 「スタート」ん：ホットもしわからない、また

「NPMの実行は、& & NPMの実行サーバを構築する」：真のWebPACKの設定上の出力オブジェクトにする必要があります。