Webpack“导出未定义”错误

Question

我刚开始使用Webpack将我的所有javascript文件捆绑到一个文件中。并在浏览器中收到运行时“导出未定义”错误。 我错过了什么吗？当我使用npm run dev或npm run build命令时，构建会正确编译。

浏览器中的完整错误：

Uncaught ReferenceError: exports is not defined
    at eval (eval at n.run (browser.min.js:3), <anonymous>:4:23)
    at Function.n.run (browser.min.js:3)
    at l (browser.min.js:3)
    at browser.min.js:3
    at XMLHttpRequest.s.onreadystatechange (browser.min.js:3)

webpack.config.js ：

const webpack = require('webpack');
const config = {
  entry: './src/js/facebookalbums.js',
    output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module:{
    rules: [
      {
        "test": /\.js$/,
        "exclude": /node_modules/,
        "loader": 'babel-loader',
        "options":
        {
            "presets":['es2015','react']
        }
      },
      {
        "test": /\.css$/,
        "use": [ 'style-loader', 'css-loader' ]
      }

    ]
  }
}
module.exports = config;

的package.json ：

{
  "name": "wpshout-react-quiz",
  "version": "1.0.0",
  "description": "",
  "main": "FacebookAlbums.js",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^8.0.0",
    "browserify": "^16.1.0",
    "concat": "^1.0.3",
    "css-loader": "^0.28.10",
    "npm-run-all": "^4.1.2",
    "onchange": "^3.3.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-image-lightbox": "^4.5.0",
    "react-slick": "^0.19.0",
    "style-loader": "^0.20.2",
    "uglify": "^0.1.5",
    "watch": "^1.0.2",
    "webpack": "^4.1.0",
    "webpack-cli": "^2.0.10"
  },
  "devDependencies": {
    "babel-preset-react": "^6.24.1"
  },
  "scripts": {
    "start": "webpack-dev-server --entry ./src/js/app.js --output-filename ./dist/bundle.js",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC"
}

facebookalbums.php：

<?php
/*
Plugin Name: FaceBookAlbums
Description: React.JS FaceBook Albums in WordPress!
Author: Ajit Goel
Author URI: http://www.ajitgoel.net
*/

add_shortcode( 'FaceBookAlbums', 'FaceBookAlbums_show_quiz' );
function FaceBookAlbums_show_quiz() {
    return '<div id="root"></div>';
}

add_action( 'wp_enqueue_scripts', 'FaceBookAlbums_enqueue_scripts' );
function FaceBookAlbums_enqueue_scripts() {
    wp_enqueue_script('react', plugin_dir_url(__FILE__).'node_modules/react/umd/react.development.js');
    wp_enqueue_script('react-dom', plugin_dir_url(__FILE__).'node_modules/react-dom/umd/react-dom.development.js');
    wp_enqueue_script('babel', 'https://npmcdn.com/babel-core@5.8.38/browser.min.js', '', null, false);
    wp_enqueue_script('FaceBookAlbums', plugin_dir_url(__FILE__).'src/js/FaceBookAlbums.js');
    wp_enqueue_style('FaceBookAlbums', plugin_dir_url(__FILE__).'src/css/FaceBookAlbums.css');
    wp_enqueue_script('FaceBookAlbums-Bundle', plugin_dir_url(__FILE__).'dist/bundle.js', '', null, true);  
}

$accepted_args = 1)
add_filter('script_loader_tag', 'FaceBookAlbums_add_babel_type', 10, 3);
function FaceBookAlbums_add_babel_type( $tag, $handle, $src ) {
    if ($handle !== 'FaceBookAlbums') {
        return $tag;
    }
    return '<script src="' . $src . '" type="text/babel"></script>' . "\n";
}

facebookalbums.js：

import React, { Component } from 'react';
import Lightbox from 'react-image-lightbox';

const images = [
  '//placekitten.com/1500/500',
  '//placekitten.com/4000/3000',
  '//placekitten.com/800/1200',
  '//placekitten.com/1500/1500',
];
export default class FaceBookAlbums extends Component {
  constructor(props) {
    super(props);

    this.state = {
      photoIndex: 0,
      isOpen: false,
    };
  }

  render() {
    const { photoIndex, isOpen } = this.state;

    return (
      <div>
        <button type="button" onClick={() => this.setState({ isOpen: true })}>
          Open Lightbox
        </button>

        {isOpen && (
          <Lightbox
            mainSrc={images[photoIndex]}
            nextSrc={images[(photoIndex + 1) % images.length]}
            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({
                photoIndex: (photoIndex + images.length - 1) % images.length,
              })
            }
            onMoveNextRequest={() =>
              this.setState({
                photoIndex: (photoIndex + 1) % images.length,
              })
            }
          />
        )}
      </div>
    );
  }
}
ReactDOM.render(<FaceBookAlbums/>, document.getElementById('root'));