如何让 webpack 将脚本链接注入 HTML 服务器文件？答案

【问题标题】：How to make webpack to inject script links into HTML server file?如何让 webpack 将脚本链接注入 HTML 服务器文件？
【发布时间】：2020-03-18 02:57:15
【问题描述】：

我的应用程序是基于 Flask 的，我正在使用 webpack 构建 JS（React 用于前端）。

当我尝试使用动态导入时，我遇到了找不到 0.bundle.js 文件的问题。很明显，为什么：因为我没有包括它。我的 html 文件是从服务器加载的：

<!DOCTYPE html>
<html>
    <head>
        <title>Main</title>
        <link rel="icon" type="image/x-icon" href="{{ url_for("static", filename="favicon.ico") }}" />
    </head>
    <body class="main">
        <div id="root"></div>
        <script src="{{ url_for("static", filename="dist/main.bundle.js")}}"></script>
    </body>
</html>

还有 webpack 配置片段：

entry: {
    main: './src/app/dashboard/main.jsx'
},
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'static/dist')
},

当然，如果我添加以下行，一切正常：

<script src="{{ url_for("static", filename="dist/0.bundle.js")}}"></script>

但这并不好，因为我不想猜测下一个裂缝会是什么。

如何正确配置？

这个例子https://github.com/thatisuday/js-plugin-starter 看起来几乎一样，但我不知道他们是如何处理这个问题的。

我也发现这个插件可以帮助'html-webpack-plugin'但是不知道怎么配置（至少我还没成功）。

【问题讨论】：

标签： reactjs flask webpack bundling-and-minification

【解决方案1】：

我必须将 publicPath 添加到 webpack 配置中：

output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'static/dist'),
    publicPath: 'static/dist/',
    chunkFilename: '[name].bundle.js',
},

【讨论】：