如何制作 webpack 以将脚本链接注入 HTML 服务器文件?

我的应用程序是基于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"，但不确定如何配置它(至少我还没有成功(。

我不得不将 publicPath 添加到 webpack 配置中：

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

相关内容

最新更新

热门标签：