Webpack 未捕获引用错误：未定义导出

我正在尝试使用webpack来babel并打包我的web应用程序（React+ES6）。但是，每当我运行webpack dev服务器并点击页面时，我就会得到

bundle.js:1 Uncaught ReferenceError:exports未定义

我做错了什么

以下是我的网页包配置：

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

{
...
"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"
},
...
}

网页包开发服务器

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');
});

B.法律改革委员会

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

格尔普菲尔

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']);

---

您的脚本或依赖项上没有Web包开发服务器。 如果您使用节点提供文件，则这取决于生成 “开始”：“npm run build&npm run server”将同时运行这些命令，并且有消息告诉我，您的应用程序在构建完成之前就已经提供了服务。改为这样做 “开始”：“npm运行生成和npm运行服务器”

---

另外，不确定在webpack配置中的输出对象中是否应该有hot:true。

我重新开始后就知道了。我删除了所有与吞咽有关的内容，只是通过装载机完成了所有工作。另外，

request

似乎就是不喜欢和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');
});

这是我的宝贝

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

---

将

模式

更改为

生产

，将

目标

更改为

网络

为我解决了这个问题

 const clientConfig = {
        mode: 'production',
        target: 'web',
        ...
      }

  module.exports = [clientConfig]

---

感谢您提供有关

&&

的提示，这会让我陷入困境。运行的服务器脚本是一个

webpack dev server

，它只是通过脚本而不是配置来完成的。我会加上它。然而，我仍然遇到同样的问题。我已经更新了我的package.json和webpack.config以反映我所做的更改。我想您可能缺少一个.babelrc文件，请在项目的根目录中添加此文件，并在其上添加以下内容。{“预设”：[“es2015”，“react”]，}所以我添加了.babelrc，安装了react和es2015的预设，然后还安装了gulp和gulp babel。我添加了新文件并更新了我的网页以反映这一点。我运行了gulp babel，它传输文件并将其存储在/lib/中，然后运行了webpack，它将babeled文件打包并将捆绑存储在dist中。我还更新了html以引用/dist/bundle.js，但仍然出现导出错误。有什么想法吗？感谢您的帮助。请尝试此加载程序：'babel？presets[]=react，presets[]=es2015'如果不起作用{test:/\.jsx？$/，exclude:/node\u modules/，加载程序：['react-hot'，babel loader']}如果不起作用，请查看此github安装程序：感谢所有帮助，但我发现：）这主要是因为请求不能很好地处理webpack。所以我把它拿走了。