Question

我正在尝试使用webpack来打包和打包我的网络应用程序（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-服务器

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"]
}

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

您的脚本或依赖项上没有webpack-dev-server。如果您使用Node提供文件，则它取决于构建＆＃34;开始＆＃34;：＆＃34; npm run build＆amp; npm运行服务器＆＃34;将同时运行命令，并告诉我你的应用程序在构建完成之前提供。这样做＆＃34;开始＆＃34;：＆＃34; npm run build＆amp;＆amp; npm运行服务器＆＃34;

另外，不确定hot：true应该在webpack config上的输出对象中。

Answer 2

我再次从头开始想出来了。我删除了涉及gulp的所有内容，并通过加载器完成了所有操作。另外，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');
});

这是我的babelrc

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

Answer 3

将mode更改为production，将target更改为web修复了该问题。

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

  module.exports = [clientConfig]

未捕获的ReferenceError：未定义导出

3 个答案: