Как я могу создать пакеты поставщиков для каждого динамически импортируемого модуля?

Question

Я работаю на веб-сайте на основе CMS с несколькими отдельными страницами и загружаю функциональность всего сайта на каждую страницу, используя файл app.js, загруженный после файла vendor.js, используя обычный код расщепление стратегия.app.js - это основной файл записи, и он использует динамический импорт для загрузки скриптов для конкретной страницы.Вот пример из моего app.js:

/**
 * "Register for a class" page
 */
if (document.body.classList.contains("page-id-4136")) {
    import(/* webpackChunkName: "register-for-a-class" */ './pages/register-for-a-class/main')
}

В этом случае файловая страница 'pages / register-for-a-class / main.js' использует Vue в качествезависимость, но пока это единственная страница на сайте, которая этого требует.Я бы предпочел не связывать Vue с vendor.js, когда он используется только на этой странице.Я попытался включить сам Vue в качестве динамического импорта, попробовав следующее:

// pages/register-for-a-class/main.js

import(/* webpackChunkName: "vue" */ 'vue').then(({ default: Vue }) => {
  new Vue({
    ...
  })
})

Но это дает мне ошибку в пакетировании веб-пакетов, которая говорит Module parse failed: 'import' and 'export' may only appear at the top level.Поэтому я также попробовал это:

// app.js

/**
 * "Register for a class" page
 */
if (document.body.classList.contains("page-id-4136")) {
    import(/* webpackChunkName: "vue" */ 'vue').then(({ default: Vue }) => {
        import(/* webpackChunkName: "register-for-a-class" */ './pages/register-for-a-class/main')
    })
}

Это просто ничего не меняет.Файл "vue.bundle.js" не создается, и, естественно, при загрузке страницы возникает ошибка Vue is not defined.

Так вот что я действительно спрашиваю. Что будетабсолютно фантастично, если бы я мог автоматически pages/register-for-a-class/main.js просто вызвать обычный статический импорт (например, import Vue from 'vue') и заставить веб-пакет генерировать как файл register-for-a-class.bundle.js, так и соответствующий register-for-a-class-vendor.bundle.js, и динамически импортировать этот комплект поставщика автоматически.Это возможно?

Вот мой текущий файл webpack.common.js (я использую webpack-merge ):

const path = require('path')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const devMode = process.env.NODE_ENV === 'development'

module.exports = {
    entry: {
        app: './assets/src/app.js'
    },
    resolve: {
        alias: {
            '~': path.resolve(__dirname, 'assets/src')
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(woff2?|ttf|eot|svg)$/,
                use: ['url-loader']
            }
        ]
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    },
    externals: {
        jquery: 'jQuery'
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

Answer 1

Я порекомендую ниже подход расщепления.Надеюсь, это поможет:)

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const devMode = process.env.NODE_ENV === 'development';

module.exports = {
    entry: {
        vendor1: ['vendor1', 'vendor2', 'vendor 3'], // all other vendor lists, package.json dependencies 
        vendor2: ['vue'],
        app: './assets/src/app.js'
    },
    resolve: {
        alias: {
            '~': path.resolve(__dirname, 'assets/src')
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    'css-loader',
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            },
            {
                test: /\.(woff2?|ttf|eot|svg)$/,
                use: ['url-loader']
            }
        ]
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                vendor1: {
                    name: 'vendor1',
                    test: 'vendor1',
                    enforce: true
                },
                vendor2: {
                    name: 'vendor2',
                    test: 'vendor2',
                    enforce: true
                }
            }
        }
    },
    externals: {
        jquery: 'jQuery'
    },
    plugins: [new VueLoaderPlugin()]
};