在具有不同 publicPath 的 webpack 中两次注入相同的资产答案

【问题标题】：Inject same asset twice in webpack with different publicPath在具有不同 publicPath 的 webpack 中两次注入相同的资产
【发布时间】：2021-02-04 14:05:34
【问题描述】：

我将publicPath 设置为/static/dist/，这会导致以下注入结果。但是我也想在基本路径/ 中注入它。我可以使用 webpack 注入两次吗？

我正在进行迁移，这要求我保留 index.html 以在子文件夹及其域中工作。

<!DOCTYPE html>
    <html lang="en-US">
      <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title id="app-title">Sample Application</title>
      <link href="/static/dist/main.eca71bee66d7a1bdc59d.min.css" rel="stylesheet"></head>
      <body style="margin: 0">
        <noscript>
          You need to enable JavaScript to run this app.
        </noscript>
        <div id="root"></div>
      <script type="text/javascript" src="/static/dist/main.eca71bee66d7a1bdc59d.min.js"></script>
</body>
</html>

所以我想得到一个带有 2 个脚本标签的输出模板；大概是通过支持2publicPath

  <script type="text/javascript" src="/static/dist/main.eca71bee66d7a1bdc59d.min.js">
  <script type="text/javascript" src="/main.eca71bee66d7a1bdc59d.min.js">

这是我当前的配置。

module.exports = {
    mode: configUtils.webpackMode,

    devtool: configUtils.webpackDevTool,

    context: path.resolve(__dirname, '..'),

    entry: configUtils.entryFile,

    output: {
        filename: configUtils.appJsFileName,
        chunkFilename: configUtils.appJsChunkFileName,
        path: configUtils.localPublishDir,
        publicPath: '/static/dist'
    },

    resolve: {
        alias: {
            src: path.resolve(__dirname, '..', 'src')
        },
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json']
    },
}

【问题讨论】：

标签： node.js npm webpack

【解决方案1】：

多次使用文件管理器插件并根据需要生成 2 个 index.html 文件 https://github.com/gregnb/filemanager-webpack-plugin

【讨论】：