Не работает динамический импорт импорт после сборки проекта

Question

У меня на проекте используется готовый компонент с готовым бандлом, который находится отдельно от основных используемых модулей, т.е. в отдельной папке в корне проекта, я подключаю его к package.json по ссылке и экспортирую динамически. Локально все работает без проблем, но после сборки (npm build) проекта, зайдя на страницу с этим компонентом - появляется ошибка: Loading chunk 4 failed Насколько я понял по понели network - у этого чанка неверно задан путь, судя ссылке в path у остальных Вероятно, нужно как то подправит путь для него в конфигурации webpack, но найти правильное решение не удалось, к сожалению, я не так хорош в работе с webpack. Есть ли какие-то идеи как можно подправить это? Структура проекта выглядит так: project:

src/
node_modules/
myCustomPackage/ - бандл здесь
...others

Основной config выглядит следующим образом:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const srcPath = path.join(__dirname, '../src/');
const distPath = path.join(__dirname, '../dist/');



/**
 * params: {
 *  WEBPACK_BUILD_PARAMS: {}
 * }
 */
module.exports = (params) => ({
    context: srcPath,
    entry: {
        index: ['babel-polyfill', './index.jsx'],
        admin: ['babel-polyfill', './admin.jsx'],
        user: ['babel-polyfill', './user.jsx'],
    },
    output: {
        path: distPath,
        filename: '[name].chunk.js',
        publicPath: '/',
    },
    resolve: {
        modules: ['node_modules', srcPath],
        extensions: ['.js', '.json', '.jsx', '.css', '.scss', '.ts', '.less', '.tsx'],
    },
    module: {
        rules: [
            {
                test: /\.js$|\.jsx$|\.tsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            },
        ],
    },
    plugins: [
        new ForkTsCheckerWebpackPlugin({
            typescript: {
                diagnosticOptions: {
                    semantic: true,
                    syntactic: true,
                },
                configFile: '../tsconfig.json'
            },
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            templateParameters: {
                WEBPACK_BUILD_PARAMS: params.WEBPACK_BUILD_PARAMS,
            },
            chunks: ['index'],
            inject: true
        }),
        new HtmlWebpackPlugin({
            filename: 'admin.html',
            template: 'index.html',
            templateParameters: {
                WEBPACK_BUILD_PARAMS: params.WEBPACK_BUILD_PARAMS,
            },
            chunks: ['admin'],
            inject: true
        }),
        new HtmlWebpackPlugin({
            filename: 'user.html',
            template: 'index.html',
            templateParameters: {
                WEBPACK_BUILD_PARAMS: params.WEBPACK_BUILD_PARAMS,
            },
            chunks: ['user'],
            inject: true
        }),
        new webpack.ContextReplacementPlugin(
            /moment[/\\]locale$/,
            /en|zh|ru|id|ms|th/
        ),
    ]
});

Конфиг для продакшена:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const webpack = require('webpack');

const constants = require('./constants');
const WEBPACK_BUILD_PARAMS = {
    API_ORIGIN_URL: constants.API_ORIGIN_URL_PROD,
    API_SIGNALR_HUB_URL: constants.API_SIGNALR_HUB_URL,
};

const baseConfigFactory = require('./webpack.config.js');
const baseConfig = baseConfigFactory({ WEBPACK_BUILD_PARAMS });
const prodConfig = Object.assign({}, baseConfig, {});

prodConfig.mode = 'production';
prodConfig.devtool = 'hidden-source-map';

prodConfig.optimization = {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
};

prodConfig.module.rules.push(
    {
        test: /\.css$|\.scss$/,
        exclude: /\.module.scss$/,
        use: [
            {
                loader: MiniCssExtractPlugin.loader,
                options: {
                    publicPath: '/public/path/to/',
                },
            },
            'css-loader',
            'sass-loader',
        ],
    },
    {
        test: /\.module\.scss$/,
        use: [
            {
                loader: MiniCssExtractPlugin.loader,
                options: {
                    publicPath: '/public/path/to/',
                },
            },
            {
                loader: 'css-loader',
                options: {
                    modules: true,
                },
            },
            'sass-loader'
        ],
    },
    {
        test: /\.(jpg|png|woff|woff2|eot|ttf)$/,
        use: {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: 'assets/',
                publicPath: '/Frontend/dist/assets',
            }
        }
    },
    {
        test: /\.(pdf|exe|doc|docx|zip|xml)$/,
        use: {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: 'static/',
                publicPath: '/Frontend/dist/static',
            }
        }
    },
    {
        test: /\.svg$/,
        use: [
            {
                loader: 'svg-sprite-loader',
                options: {
                    extract: true,
                    spriteFilename: '../../Frontend/dist/assets/sprite.svg',
                    publicPath: '/',
                    runtimeCompat: true
                }
            },
            {
                loader: 'svgo-loader',
                options: {
                    enforce: 'pre',
                    plugins: [
                        { removeAttrs: { attrs: '(fill|stroke)' }},
                    ]
                }
            }
        ]
    },
);

prodConfig.plugins.push(
    new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css',
    }),
    new SpriteLoaderPlugin(
        {
            plainSprite: true
        }
    ),
    new webpack.DefinePlugin({
        'WEBPACK_BUILD_PARAMS': JSON.stringify(WEBPACK_BUILD_PARAMS)
    })
);

module.exports = prodConfig;

Буду рад любой помощи!

БЛОГ НА HUSL

Не работает динамический импорт импорт после сборки проекта

Ответы (0 шт):