Javascript 吞咽Web包只加载jquery一次

我的gulpfile.js中有两个吞咽任务。它用于一个网站

第一个是用webpack编译主js文件，该文件主要用于网站的所有页面，主要是视觉效果，并将其合并为一个文件

gulp.task('scripts', function(callback) {
let firstBuildReady = false;

function done(err, stats) {
    firstBuildReady = true;
    if (err) { // hard error, see https://webpack.github.io/docs/node.js-api.html#error-handling
        return;  // emit('error', err) in webpack-stream
    }
    gulplog[stats.hasErrors() ? 'error' : 'info'](stats.toString({
        colors: true
    }));
}

let options = {
    output: {
        publicPath: '/js/',
        filename: isDevelopment ? '[name].js' : '[name]-[chunkhash:10].js'
    },
    watch:   isDevelopment,
    devtool: isDevelopment ? 'cheap-module-inline-source-map' : false,
    module:  {
        loaders: [{
            test: /\.js$/,
            //include: path.join(__dirname, "app/src/scripts/modules"),
            loader: 'babel-loader',
            query: {
               presets: ["env"]
            }
        }]
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
    ]
};

if (!isDevelopment) {
    options.plugins.push(new AssetsPlugin({
        filename: 'scripts.json',
        path:     __dirname + '/app/manifest',
        processOutput(assets) {
            for (let key in assets) {
                assets[key + '.js'] = assets[key].js.slice(options.output.publicPath.length);
                delete assets[key];
            }
            return JSON.stringify(assets);
        }
    }));
}

return gulp.src(jsSRC)
    .pipe(plumber({
        errorHandler: notify.onError(err => ({
            title:   'Scripts',
            message: err.message
        }))
    }))
    .pipe(named(function(file){
        return 'app'
    }))
    .pipe(webpackStream(options, null, done))
    .pipe(gulpIf(!isDevelopment, uglify()))
    .pipe(gulp.dest(jsDIST))
    .on('data', function() {
        if (firstBuildReady) {
            callback();
        }
    });

})

第二个将每个js模块编译为一个文件——一些js脚本，用于特殊页面。这些脚本只包含在需要的地方

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

function done(err, stats) {
    firstBuildReady = true;
    if (err) {
        return;
    }
    gulplog[stats.hasErrors() ? 'error' : 'info'](stats.toString({
        colors: true
    }));
}

let options = {
    output: {
        publicPath: '/js/',
        filename: isDevelopment ? '[name].js' : '[name]-[chunkhash:10].js'
    },
    watch:   isDevelopment,
    devtool: isDevelopment ? 'cheap-module-inline-source-map' : false,
    module:  {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
               presets: ["env"]
            }
        }]
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin()
    ]
};

if (!isDevelopment) {
    options.plugins.push(new AssetsPlugin({
        filename: 'webpack.json',
        path:     __dirname + '/app/manifest',
        processOutput(assets) {
            for (let key in assets) {
                assets[key + '.js'] = assets[key].js.slice(options.output.publicPath.length);
                delete assets[key];
            }
            return JSON.stringify(assets);
        }
    }));
}

return gulp.src('app/src/scripts/modules/*.js')
    .pipe(plumber({
        errorHandler: notify.onError(err => ({
            title:   'Webpack',
            message: err.message
        }))
    }))
    .pipe(named())
    .pipe(webpackStream(options, null, done))
    .pipe(gulpIf(!isDevelopment, uglify()))
    .pipe(gulp.dest(jsDIST))
    .on('data', function() {
        if (firstBuildReady) {
            callback();
        }
    });

})

但是对于第二个任务，我必须在每个文件中包含Jquery，否则它不会被编译。但是Jquery包含在主app.js文件中

我怎样才能解决它

---

谢谢

，因为听起来您在应用程序中使用了一种有点异国情调的方式来加载JS，而不是像require这样的方法。请确保，您最简单的选择可能是在构建单个模块时使用。您的主脚本/页面必须确保jQuery是全局公开的，就像在window.$或window.jQuery下一样。然后，对于您的网页包配置，包括以下内容：

{
  // ...
  externals: {
    jquery: '$'
  }
}

---

这将用$代替所有require'jquery'调用，而不是将jquery包含在每个JS包中。

您希望如何在运行时加载这些webpack包？我很好奇为什么你不使用典型的网页包方法&入口点和代码拆分。我已经为我的cms编写了一个插件，它只使用清单文件将所需的脚本插入html。