带有requirejs和AMD的Webpack创建n版本

Question

我有一个使用Backbone，Marionette，Handlebars的项目，我使用grunt和r.js进行构建，现在我想切换到webpack进行代码拆分并删除r.js，我成功创建了webpack.config。 js转换了我的requirejs配置，但是当我使用webpack构建时，输出是137个js文件构建，有人可以告诉我为什么会有这么多构建吗？项目中的每个需求都有一个构建？如何将所有这些构建都归为更少的构建？

这是我的一些代码：

webpack.config.js

const webpack = require('webpack');

module.exports = {
    mode: "production",
    entry: "./js/main.js",
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: '[name].js'
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
        modules: ['js', 'node_modules'],
        alias: {
            "spin.jquery": 'lib/spin.jquery',
            "common-behavior": 'common/common_behavior',
            "hotdog-behavior": 'common/hotdog_behavior',
            "view-template-behavior": 'common/view_template_behavior',
            "nested_page_behavior": 'common/nested_page_behavior',
            "utilities": 'common/utilities',
            "storage": 'models/storage',
            "local_storage": 'local_storage',
            "session_storage": 'session_storage',
            "cookie_storage": 'cookie_storage',
            "head_app": 'apps/head/head_app',
            "pages": 'pages',
            "header_app": 'apps/header/header_app',
            "footer_app": 'apps/footer/footer_app',
            "handlebars": 'handlebars/dist/handlebars.min.js',
            "bootstrap-datetimepicker": 'lib/bootstrap-datetimepicker.min',
            "bootstrap-select": "lib/bootstrap-select",
            "jasny-bootstrap": "jasny-bootstrap/dist/js/jasny-bootstrap.min.js",
            "card": 'lib/jquery.card',
        }
    },
    module: {
        rules: [
            { test: /pages/, loader: 'imports-loader?head_app' },
            { test: /views/, loader: 'imports-loader?head_app' },
            { test: /footer_app/, loader: 'imports-loader?head_app' },
            { test: /header_app/, loader: 'imports-loader?head_app' },
            { test: /spin.jquery/, loader: 'imports-loader?jquery,spin' },
            { test: /bootstrap-datetimepicker/, loader: 'imports-loader?bootstrap,moment' },
            { test: /bootstrap-select/, loader: 'imports-loader?bootstrap' },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
              }
        ]
    }
}

这是我的一些代码：

define([
    'jquery',
    'backbone',
    'backbone.marionette',
    'regions/notification',
    'regions/banner',
    'regions/dialog',
    'regions/transition',
    'config',
    'storage',
    'local_storage',
    'session_storage',
    'common/template_module',
    'common/mobileapp_module',
    'common/background_module',
    'common-behavior',
    'hotdog-behavior',
    'view-template-behavior',
    'nested_page_behavior',
    'js-cookie',
    'common/utilities',
    'backbone-fetch-cache'
], function ($,
             Backbone,
             Marionette,
             NotificationRegion,
             BannerRegion,
             DialogRegion,
             TransitionRegion,
             Config,
             MopStorage,
             LocalStorage,
             SessionStorage,
             templateModule,
             mobileappModule,
             backgroundModule,
             commonBehavoir,
             hotDogBehavior,
             viewTemplateBehavior,
             nestedPageBehavior,
             Cookies,
             Utilities
) {
    'use strict';

    var APP = new Marionette.Application();

    window.Behaviors = {};
    Marionette.Behaviors.behaviorsLookup = function() {
        return window.Behaviors;
    };

    window.Behaviors.CommonBehavior = commonBehavoir(APP);
    window.Behaviors.HotDogBehavior = hotDogBehavior(APP);
    window.Behaviors.ViewTemplateBehavior = viewTemplateBehavior(APP);
    window.Behaviors.NestedPageBehavior = nestedPageBehavior(APP);

    APP.templateModule = templateModule(APP);
    APP.TM = MOP.templateModule;
    APP.MAM = mobileappModule(APP);
    APP.BCKGM = backgroundModule(APP);
    APP.Utilities = Utilities;

    APP.SessionStorage = SessionStorage;

    APP.state = {
        loggedUser: undefined
    };

    /****************************************************************************************************
     * Events
     * ------
     */
    APP.on('start', function (options) {
        if (Backbone.history){
            if (window._globals.page != 'index') {
                require([
                    "common-behavior",
                    "head_app",
                    "pages",
                    "header_app",
                    "footer_app",
                    "views"
                ], function () {

等...所以我的代码充满了语法，带有定义和要求，这是从webpack生成的dist文件夹：

有很多构建，我想知道是否可以将这些构建归为一组，或者是否需要通过另一种方法完成。