React-loadable получает куски только с относительного пути - PullRequest
Новая
       33

React-loadable получает куски только с относительного пути

0 голосов
/ 14 сентября 2018

Я использую webpack 4.6.0 и babel 7.0.0 для создания react 16.3 веб-приложения.

Мои ресурсы js находятся по адресу https: //domain/js/app.bundle.js

Я использую реагирующую загрузку для разделения компонентов на куски.Чанки также находятся в / js /, однако, response выбирает их с относительного пути, то есть: 

https: //domain/1.app.bundle.js

, что, конечно, не работает.

Вопрос: Как мне отреагировать или веб-пакет использовать абсолютный путь / JS / для извлечения кусков?

Вот мой webpack.config.json 

var path = require('path');

module.exports = {
    mode: 'production',
    devtool: 'eval-source-map',
    entry: './js/src/app.js',
    watch: false,
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
        ignored: /node_modules/
    },
    output: {
        path: path.resolve(__dirname, "output/js"),
        filename: 'app.bundle.js',
        chunkFilename: '[name].app.bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.resolve(__dirname, "js/src"),
                query: {
                    presets: ['@babel/preset-react'],//, 'es2015'],
                    plugins: [
                        'transform-class-properties',
                        '@babel/plugin-syntax-dynamic-import'
                    ]
                }
            },
            {
                test: /\.scss$/,
                include: path.resolve(__dirname, "sass"),
                loaders: ['style', 'css', 'sass']
            }
        ]
    }
};

А вотпакеты, которые у меня есть в package.json 

    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@material-ui/core": "^3.0.3",
    "@material-ui/icons": "^3.0.1",
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.1",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.9.0",
    "@babel/preset-react": "^7.0.0",
    "node-sass": "^4.9.2",
    "react": "^16.3.2",
    "react-addons-css-transition-group": "^15.6.2",
    "react-dom": "^16.3.2",
    "react-loadable": "^5.5.0",
    "react-swipeable-views": "^0.12.13",
    "react-tap-event-plugin": "^3.0.3",
    "scss-compile": "^0.1.7",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.2",

А вот код реакции, который я изменил, чтобы проверить разбиение кода 

import React from 'react';
import Loadable from 'react-loadable';

const PV = Loadable({
    loader: () => import('./PV/PV'),
    loading: () => <div>Loading...</div>,
});

1 Ответ

0 голосов
/ 14 сентября 2018

Решено 

output: {
    path: path.resolve(__dirname, "output/js"),
    filename: 'app.bundle.js',
    chunkFilename: '[name].app.bundle.js',
    publicPath: '/js/'  <------------------ this was the missing piece.
},
...