为什么webpack块负载被忽略devServer端口?

时间:2019-03-14 07:13:45

标签: reactjs webpack webpack-dev-server webpack-4

我正在尝试对React.lazy使用动态导入。代码很简单

import React, { Component, Suspense, lazy, } from 'react';

const BlazyComponent = lazy(() => {

    return import('./blazy');
});

class Main extends Component {

    render () {

        return (<Suspense fallback={<div>Loading...</div>}>
            <BlazyComponent/>
        </Suspense>);
    }
}

export default Main;

因此,当我启动Webpack devServer时,浏览器控制台显示错误

index.js:114 Uncaught (in promise) Error: Loading chunk 0 failed.
(missing: http://domain/build/0.js)
    at HTMLScriptElement.onScriptComplete (index.js:114)

如我所见,从index.cssindex.js成功装入了http://domain:8080/build/test/index.csshttp://domain:8080/build/test/index.js捆绑包。

但是从http://domain/build/0.js加载块(webpack devServer忽略端口)。如何从http://domain:8080/build/0.js强制加载块。

Webpack配置

entry: {

    'test/index': [ 'babel-polyfill', './resources/assets/modules/test/index', ],
},
output: {

    path: path.resolve(__dirname, './public/build/'),
    publicPath: '/build/',
    filename: '[name].js',
    chunkFilename: '[name].js',
},
...
devServer: {

    host: 'domain',
    port: 8080,
},

PS。我知道,我可以使用环境变量,但是可以搜索更优雅的决策

1 个答案:

答案 0 :(得分:0)

尝试将您的publicPath更改为http://domain:8080/build/吗?

请参见https://webpack.js.org/guides/public-path/#environment-based