如果watch是false,Webpack + gulp会出错

时间:2016-10-14 09:51:39

标签: javascript gulp webpack

我正在使用带有gulp的webpack,我的手表有问题。

这是我的一项任务:

var gulp          = require('gulp');
var gulpIf        = require('gulp-if');
var uglify        = require('gulp-uglify');
var plumber       = require('gulp-plumber');
var notify        = require('gulp-notify');
var webpackStream = require('webpack-stream');
var webpack       = webpackStream.webpack;
var named         = require('vinyl-named');
var config        = require('../config');

gulp.task('webpack', function(callback) {
    var firstBuildReady = false;

    function done(err, stats) {
        firstBuildReady = true;

        if (err) {
            return; // emit('error', err) in webpack-stream
        }

        console.log('Webpack done');
    }

    var options = {
        output: {
            filename: '[name].js',
            library: '[name]'
        },

        watch: config.isDevelopment, // watch only in development
        watchOptions: {
            aggregateTimeout: 100
        },

        devtool: config.isDevelopment ? 'eval' : null, // source-map only in development

        resolve: {
            modulesDirectories: ['node_modules'],
            extensions: ['', '.js']
        },

        resolveLoader: {
            modulesDirectories: ['node_modules'],
            moduleTemplates: ['*-loader', '*'],
            extensions: ['', '.js']
        },

        module: {
            loaders: [
                {
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: 'babel',
                    query: {
                        presets: ['es2015'],
                        plugins: ['transform-runtime']
                    }
                },
                {
                    test: /vue.js$/,
                    loader: 'expose?Vue'
                },
                {
                    test: /vue-validator.js$/,
                    loader: 'expose?VueValidator'
                }
            ]
        },

        plugins: [
            new webpack.NoErrorsPlugin(),
            new webpack.DefinePlugin({
                NODE_ENV: JSON.stringify(config.isDevelopment)
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'common'
            }),
            new webpack.ProvidePlugin({
                Vue: 'vue/dist/vue.js',
                VueValidator: 'vue-validator/dist/vue-validator.js'
            })
        ]
    };

    return gulp.src(config.js.src)
        .pipe(plumber({
            errorHandler: notify.onError(err => ({
                title: 'Webpack',
                message: err.message
            }))
        }))
        .pipe(named())
        .pipe(webpackStream(options, null, done))
        .pipe(gulpIf(!config.isDevelopment, uglify())) // uglify only in production
        .pipe(gulp.dest(config.js.dest))
        .on('data', function() {
            if (firstBuildReady && !callback.called) {
                callback.called = true;
                callback();
            }
        });

});

在我的config.js中:

var isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV == 'development';

module.exports = {
    isDevelopment: isDevelopment
    // ...
};

当我运行导出NODE_ENV =开发&& gulp webpack - 一切都很好。

但如果我运行导出NODE_ENV =生产&& gulp webpack - 我有错误。

http://joxi.ru/Q2KB7lgU6LWYmj - 这里有错误截图。

我知道如果手表是假的 - 错误,如果手表是真的 - 没有错误。但我无法理解为什么会发生这种情况。

0 个答案:

没有答案