Wepback. Ошибка загрузки фрагмента после использования `import ()` - PullRequest
Новая
       80

Wepback. Ошибка загрузки фрагмента после использования `import ()`

2 голосов
/ 11 июля 2020

Я работаю над проектом React и обнаружил, что один из файлов budles слишком велик, и мне нужно его разделить. Итак, я попытался использовать import() синтаксис: 

import React from 'react';
import thumbnails from './thumbnails.json';

export default class Portfolio extends React.Component {
    constructor(props) {
        super(props);
        import('react-image-gallery').then(module => {
            const ImageGallery = module.default;
            this.galleries = thumbnails.map((thumbnail, i) => {
                let items = [];
                for (let i = 0; i < thumbnail.gallery.amount; i++) {
                    items.push({
                        original: `${thumbnail.gallery.href}/${i}.png`,
                        thumbnail: `${thumbnail.gallery.href}/${i}m.png`,
                    })
                }
                return (
                    <div className="gallery">
                        <ImageGallery key={i} items={items} thumbnailPosition="left" showPlayButton={false}
                                      onImageLoad={this.onGalleryLoad.bind(this, thumbnail.gallery.amount)}/>
                        <button className="gallery__close" onClick={this.onCloseClick.bind(this)}>&times;</button>
                    </div>
                )
            });
        });
    }

Portfolio - основной компонент для одной страницы. Позже, когда я открываю страницу, появляется ошибка Uncaught (in promise) ChunkLoadError: Loading chunk 0 failed. Как я видел, JavaScript пытается загрузить файл 0.bundle.js из каталога portfolio. В то время как необходимый фрагмент - это 0.chunk.js, который находится в каталоге root.

Вот моя конфигурация Wepback: 

const TerserPlugin = require('terser-webpack-plugin');

module.exports = env => {
    const isDev = env.MODE === 'development';

    return {
        mode: isDev ? 'development' : 'production',
        devtool: 'source-map',
        entry: {
            './home/script': './home/script.jsx',
            './portfolio/script': './portfolio/script.jsx',
            './prices/script': './prices/script.jsx',
            './contacts/script': './contacts/script.jsx',
            './extra/script': './extra/script.jsx',
            './extra/locations/script': './extra/locations/script.jsx',
            './extra/poses/script': './extra/poses/script.jsx',
            './extra/stylists/script': './extra/stylists/script.jsx',
            './extra/studios/script': './extra/studios/script.jsx',
        },
        output: {
            path: __dirname,
            publicPath: __dirname,
            filename: '[name].bundle.js',
            chunkFilename: '[name].chunk.js',
        },
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ['@babel/preset-env', '@babel/react'],
                            plugins: [
                                '@babel/plugin-proposal-class-properties',
                                '@babel/plugin-transform-runtime',
                                '@babel/plugin-syntax-dynamic-import',
                            ]
                        }
                    }
                },
            ],
        },
        optimization: {
            minimize: !isDev,
            minimizer: [new TerserPlugin({
                test: /.js$/i,
                extractComments: false,
                terserOptions: {
                    output: {
                        comments: false,
                    },
                },
            })],
        },
        resolve: {
            extensions: ['.jsx', '.js'],
        }
    }
};

Ответы [ 2 ]

1 голос
/ 11 июля 2020

Попробуйте изменить выходной объект на 

output: {
    ......
    chunkFilename: '[name].[chunkhash].js',
}

Проверьте это для справки https://github.com/webpack/webpack/issues/9207#issuecomment -499448929

0 голосов
/ 11 июля 2020

Я нашел ответ. Чтобы избежать поиска в подкаталогах, вы должны использовать publicPath: '/' в параметре вывода webpack. Было предложено использовать хэши чанков, но, как я ни пробовал, в этом нет необходимости. Полное решение находится здесь: 

output: {
    path: __dirname,
    publicPath: '/',
    filename: '[name].bundle.js',
    chunkFilename: './assets/chunks/[name].chunk.js',
}

Часть ./assets/chunks/ не требуется. Это просто для хранения всех фрагментов в одном каталоге

...