在常见的Symfony捆绑包上使用webpack

问题描述

我有一个用于多个Symfony项目的“公共”捆绑包。该捆绑包包含我们在不同项目（js和css）上使用的资产。 到目前为止，该捆绑包主要是在添加带有允许加载库cdn的宏的资产。

{% macro daterangepicker_js() %}
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
{% endmacro %}

我们使用宏仅加载每个页面所需的脚本。我们自己管理依赖项。

但是我们要开始使用npm + webpack来管理js库更新（jquery，bootstrap等）。因此，我将Webpack安装在“普通”捆绑包上（而不是在我们的其他项目上）。我还为每个库创建了一个条目（请参见下面的代码）。为了避免重新导入每个条目中的所有依赖项，我激活了splitEntryChunks选项。

现在我的webpack.config.js看起来像这样：

Encore
    // directory where compiled assets will be stored
    .setOutputPath('Resources/public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    .setManifestKeyPrefix('bundles/commonbundle')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('jquery','./assets/jquery.js')
    .addEntry('jquery-datepicker','./assets/jquery-datepicker.js')
    .addEntry('bootstrap','./assets/bootstrap.js')
    .addEntry('bootstrap-select','./assets/bootstrap-select.js')


    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()

    .enableSourceMaps(false)
    .enableVersioning(false)
    .enableSingleRuntimeChunk()
    .autoProvidejQuery()
    .splitEntryChunks()
    .configureSplitChunks(function (splitChunks) {
        // change the configuration
        splitChunks.name = true;
        splitChunks.chunks = 'all';
    })
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

我的树枝宏看起来像这样：

{% macro jquery_js() %}
    <script src="{{ asset('bundles/commonbundle/build/runtime.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap~bootstrap-select~jquery~jquery-datepicker.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/jquery.js') }}"></script>
{% endmacro %}

{% macro bootstrap_js() %}
    <script src="{{ asset('bundles/commonbundle/build/runtime.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap~bootstrap-select~jquery~jquery-datepicker.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/bootstrap.js') }}"></script>
{% endmacro %}

{% macro bootstrapselect_js() %}
    <script src="{{ asset('bundles/commonbundle/build/runtime.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap~bootstrap-select~jquery~jquery-datepicker.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap-select.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/bootstrap-select.js') }}"></script>
{% endmacro %}

{% macro datepicker_js() %}
    <script src="{{ asset('bundles/commonbundle/build/runtime.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap~bootstrap-select~jquery~jquery-datepicker.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~jquery-datepicker.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/jquery-datepicker.js') }}"></script>
{% endmacro %}

我不能使用{{encore_entry_script_tags（）}}，因为webpack未安装在主应用程序中，所以您试图自己加载这些块。

这真的很丑，甚至无法正常工作。

Bootstrap选择初始化被调用了4次，最后我得到了重复的选择字段。

另外，我有来自datepicker的错误消息：

未捕获的TypeError：无法读取未定义的属性“ regional”

我如何改善Webpack的配置？ 如果可能的话，我想继续使用完全相同的宏，我无法重构所有其他项目以停止使用它们。

解决方法

因此，我设法更改了块的配置，现在可以更轻松地维护宏 webpack.config.js：

    .enableSingleRuntimeChunk()
    .autoProvidejQuery()
    .splitEntryChunks()
    .configureSplitChunks(function (splitChunks) {
        splitChunks.name = function (module,chunks,cacheGroupKey) {
            const moduleFileName = module.identifier().split(/[\/,\\]/).reduceRight(item => item).replace(/\.[^/.]+$/,"");
            return `${cacheGroupKey}~${moduleFileName}`;
        };
        splitChunks.chunks = 'all';
    })

每个库创建一个块，但是很容易将它们划分为我的宏。

{% macro jquery_js() %}
    <script src="{{ asset('bundles/commonbundle/build/runtime.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~jquery.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/jquery.js') }}"></script>
{% endmacro %}

{% macro bootstrap_js() %}
    <script src="{{ asset('bundles/commonbundle/build/vendors~jquery.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/bootstrap.js') }}"></script>
{% endmacro %}

{% macro bootstrapselect_js() %}
    <script src="{{ asset('bundles/commonbundle/build/vendors~jquery.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap-select.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/bootstrap-select.js') }}"></script>
{% endmacro %}

供应商/存储块是重复的，但是浏览器不会每次都加载它们，因为它们是同一文件，所以没关系。

这可能不是最干净的解决方案，但可以在我的特定用例中使用。