为什么 webpack 块加载被忽略 devServer 端口？答案

【问题标题】：Why webpack chunks load is ignored devServer port?为什么 webpack 块加载被忽略 devServer 端口？
【发布时间】：2019-08-05 00:17:36
【问题描述】：

我正在尝试将动态导入与 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.css 和 index.js 包已成功从 http://domain:8080/build/test/index.css 和 http://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。我知道，我可以使用环境变量，但搜索更优雅的决定

【问题讨论】：

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

【解决方案1】：

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

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

【讨论】：

好的，这工作正常，但需要使用环境变量控制publicPath 用于开发和生产。所以，我认为有更优雅的决定；）
我更新了我的答案。您可以使用基本环境 ASSET_PATH，或通过 __webpack_public_path__。