gulp-wabpack ProvidePlugin配置不生效

Question

这是一个带多个小问题的问题（笑哭）先说最直接的：

gulpfile.js配置如下：

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    clean = require('gulp-clean'),
    order = require("gulp-order"),
    concat = require('gulp-concat'),
    cache = require('gulp-cache'),
    fileinclude = require('gulp-file-include'),
    filter = require('gulp-filter'),
    gulpSequence = require('gulp-sequence'),
    browserSync = require('browser-sync').create(),
    webpack = require('gulp-webpack');


// 样式
gulp.task('styles', function() {
    return gulp.src('src/**/*.css')
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(gulp.dest('dist/'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/'));
});

// 脚本
gulp.task('scripts', function() {
    return gulp.src('src/js/pages/index.js')
        .pipe(webpack(require('./webpack.config.js'),null,function(){}))
        .pipe(gulp.dest('dist/'));
});

// 图片
gulp.task('images', function() {
    return gulp.src('src/images/**/*')
        .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
        .pipe(gulp.dest('dist/'));
});

//html
gulp.task('html', function() {
    return gulp.src(['src/**/*.html', '!src/pages/include/'])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('dist/'));
});

// 清理
gulp.task('clean', function() {
    return gulp.src('dist/', { read: false })
        .pipe(clean());
});

gulp.task('watch', function() {

    gulp.watch('src/css/**/*.css', ['styles']);

    gulp.watch('src/js/**/*.js', ['scripts']);

    gulp.watch('src/images/**/*', ['images']);

    gulp.watch('src/**/*.html', ['html']);

    gulp.watch(['dist/**']).on('change', browserSync.reload);

});

gulp.task('server', function() {
    browserSync.init({
        server: {
            baseDir: "./dist/"
        }
    });
});

gulp.task('default', ['clean'], gulpSequence(['styles', 'scripts', 'images', 'html'], 'watch', 'server'));

webpack.config.js配置如下：

const webpack = require('webpack');
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

module.exports = {
    // entry: {
    //     // index: './src/js/index.js',
    //     index: './src/js/pages/index.js'
    // },
    output: {
        path: process.cwd() + '/dist/',
        filename: '[name].js',
        chunkFilename:'[name]chunk.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: 'babel-loader',
        }]
    },

    plugins: [

        new webpack.ProvidePlugin({
            $: process.cwd() + '/src/js/libs/jquery-2.0.0.min.js'
        })

    ]
};

index.js代码如下：

var module = require('../common/module.js');

module.log();

module.hi();

$(function() {
    $('#btn').click(function() {
        require.ensure([], function() {
            const clickModule = require('../common/click-module.js');
            clickModule.handleClick();
        }, 'temp');
    });
})

文件结构如下：

需求是点击按钮的时候才动态加载对应的js~原本我的想法是通过ProvidePlugin自动加载jquery代码~不过看打包出来的index.js~始终没有包含jquery的代码~不知是什么原因

另外~我发现在gulpfile处理脚本的任务中~如果把src中的参数写成src/js/*/.js，会直接把jquery和本该动态加载的点击事件的代码全部打包到main.js~如果是这样的话对于多页应用~是不是要在webpack的配置里将所有页面对应的入口脚本都编写到entry字段中。

最后~之所以做webpack和gulp的结合~主要是因为针对多页应用~有个很关键的需求是公共的头部和尾部等部分需要通过include的方式插入到页面~原本想全部使用webpack处理的~但是一直没有找到合适的include的插件~所以只能将页面构建的处理交由gulp处理~然后在结合webpack做脚本的按需加载和按需打包~不知道有木有大神遇到这方面的问题~有没有更好的解决方案