Javascript 带有第三方捆绑包的网页包

我想提供一个webpack包，其中包含所有常见的第三方供应商（angular 1.4、jQuery和一些其他LIB）

目前开发了以下模块

• 模块A
• 供应商模块

供应商模块： 创建一个包含所有第三方库（angular 1.4、jQuery和其他一些库）的简单模块

webpack.config.js:

var webpack = require('webpack');
var path = require('path');

module.exports = {
        entry: {
            vendor: './index.js',
        },
        output: {
            // filename: '[chunkhash].[name].js',
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: []
    }

require('jquery');
require('angular');

var angular = require('angular');
var myJQ = require('jQuery');
var app = angular.module("Test", []);

console.log("Angular Boostrap");
console.log(app);
console.log("jQuery Boostrap");
console.log(myJQ);

var webpack = require('webpack');
var path = require('path');

module.exports = {
        entry: {
            main: './index.js',
        },
        externals: {
            angular: 'angular',
            "jQuery": {
                root: '$',
                commonjs: 'jquery',
                amd: 'jquery'
            }
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: []
    }

index.js:

var webpack = require('webpack');
var path = require('path');

module.exports = {
        entry: {
            vendor: './index.js',
        },
        output: {
            // filename: '[chunkhash].[name].js',
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: []
    }

require('jquery');
require('angular');

var angular = require('angular');
var myJQ = require('jQuery');
var app = angular.module("Test", []);

console.log("Angular Boostrap");
console.log(app);
console.log("jQuery Boostrap");
console.log(myJQ);

var webpack = require('webpack');
var path = require('path');

module.exports = {
        entry: {
            main: './index.js',
        },
        externals: {
            angular: 'angular',
            "jQuery": {
                root: '$',
                commonjs: 'jquery',
                amd: 'jquery'
            }
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: []
    }

单元A： index.js:

var webpack = require('webpack');
var path = require('path');

module.exports = {
        entry: {
            vendor: './index.js',
        },
        output: {
            // filename: '[chunkhash].[name].js',
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: []
    }

require('jquery');
require('angular');

var angular = require('angular');
var myJQ = require('jQuery');
var app = angular.module("Test", []);

console.log("Angular Boostrap");
console.log(app);
console.log("jQuery Boostrap");
console.log(myJQ);

var webpack = require('webpack');
var path = require('path');

module.exports = {
        entry: {
            main: './index.js',
        },
        externals: {
            angular: 'angular',
            "jQuery": {
                root: '$',
                commonjs: 'jquery',
                amd: 'jquery'
            }
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: []
    }

webpack.config.js:

var webpack = require('webpack');
var path = require('path');

module.exports = {
        entry: {
            vendor: './index.js',
        },
        output: {
            // filename: '[chunkhash].[name].js',
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: []
    }

require('jquery');
require('angular');

var angular = require('angular');
var myJQ = require('jQuery');
var app = angular.module("Test", []);

console.log("Angular Boostrap");
console.log(app);
console.log("jQuery Boostrap");
console.log(myJQ);

var webpack = require('webpack');
var path = require('path');

module.exports = {
        entry: {
            main: './index.js',
        },
        externals: {
            angular: 'angular',
            "jQuery": {
                root: '$',
                commonjs: 'jquery',
                amd: 'jquery'
            }
        },
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'dist')
        },
        plugins: []
    }

模块A index.js可能需要'angular'，我看到了正确的输出，但是'jquery'的要求失败，出现了一个错误

我脑子里有两个问题

包括第三方供应商的常见方式是什么

模块A index.js中的jquery有什么问题

多谢各位

包含第三方供应商的最佳方式是DllPlugin。它完全满足您的需求，将您的应用程序分为两个包。这样的话，构建过程是快速、独立的，并且你的应用程序中没有限制，因为dllPlugin连接了两个包。遗憾的是，webpackv2文档中还没有关于dllPlugin的文档，但是有一些教程，比如

我认为这取决于您使用的jQuery。如果jQuery自动将自己暴露在窗口中，请尝试

externals: { jQuery: 'window.jQuery' }