6

我正在使用webpack 4.6.0并babel 7.0.0构建react 16.3网络应用程序。

我的 js 资产在 https://domain/js/app.bundle.js 下

我使用 react-loadable 将组件拆分成块。这些块也位于 /js/ 下，但是，react 从相对路径中获取它们，即：

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

这当然行不通。

问题：如何告诉 react 或 webpack 使用绝对路径 /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>,
});
4

1 回答 1

7

解决了

output: {
    path: path.resolve(__dirname, "output/js"),
    filename: 'app.bundle.js',
    chunkFilename: '[name].app.bundle.js',
    publicPath: '/js/'  <------------------ this was the missing piece.
},
于 2018-09-14T10:36:22.903 回答