Question

我正在努力寻找一个如何设置webpack包输出文件的公共路径的示例。

如果您在编译时不知道publicPath，则可以省略它在您的入口点设置__webpack_public_path__。

像这样：

__webpack_public_path__ = myRuntimePublicPath

有人会非常友好地创建一个JSFiddle示例，如何做到这一点？

Answer 1

近两年后，一切都没有改变。仍然很难找到在运行时为webpack设置公共路径的示例。

先决条件

webpack 4.5.0
一个足以利用代码拆分功能的应用

为简单起见，假设我们的html位于index.html中，而应用程序入口点为app.js

有效的示例

index.html

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div id="app"></div>
    <script type="application/javascript">
        window.resourceBasePath = '/path/to/scripts/on/server/';
    </script>
    <script type="application/javascript" src="/path/to/scripts/on/server/app.js"></script>
</body>
</html>

app.js

// it is important to set global var before any imports
__webpack_public_path__ = window.resourceBasePath;

import React from 'react';
import ReactDOM from 'react-dom';
import {store, history} from './store';

const render = () => {
    import('./root').then((module) => {
        const Root = module.default;

        ReactDOM.render(
            <Root
                store={store}
                history={history}
            />,
            document.getElementById('app'),
        );
    });
};

render();

if (module.hot) {
    module.hot.accept('./root', render);
}

一个无效的示例

Webpack publicPath documentation说，仅需使用正确的名称设置全局变量就足够了。我做到了：

index.html

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div id="app"></div>
    <script type="application/javascript">
        __webpack_public_path__ = '/path/to/scripts/on/server/';
    </script>
    <script type="application/javascript" src="/path/to/scripts/on/server/app.js"></script>
</body>
</html>

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import {store, history} from './store';

const render = () => {
    import('./root').then((module) => {
        const Root = module.default;

        ReactDOM.render(
            <Root
                store={store}
                history={history}
            />,
            document.getElementById('app'),
        );
    });
};

render();

if (module.hot) {
    module.hot.accept('./root', render);
}

在这种情况下，我的应用无法在控制台中抱怨，它无法从当前路径加载0.js到index.html。这意味着设置公共路径不会产生任何影响。

在运行时设置webpack公共路径的示例

1 个答案: