webpack - 未捕获的 ReferenceError : exports is not defined

Question

我正在尝试使用 webpack 来 babel 并打包我的 web-app (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

{
...
"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-server

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

.babelrc

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

Answer 1

您的脚本或依赖项上没有 webpack-dev-server。
如果您使用 Node 提供文件，这取决于构建
"start": "npm run build & npm run server"将同时运行这些命令，有些东西告诉我你的应用程序在构建完成之前已经提供。改为这样做
"start": "npm run build && npm run server"

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