Webpack с requirejs и AMD создают n сборок - PullRequest
0 голосов
/ 02 марта 2019

У меня есть проект, который использует Backbone, Marionette, Handlebars, и я строю его с помощью grunt и r.js, теперь я хочу переключиться на webpack, чтобы разделить код и удалить r.js, я успешно создал webpack.config.js преобразует конфигурацию my 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 () {

и т. д. ... поэтому мой код полон синтаксиса, с define и require, это папка dist, сгенерированная из веб-пакета:

enter image description here

Существует множество сборок, я хочу знать, могу ли я сгруппировать их вместе или, если требуется, есть другой способ сделать это.

...