獲取webpack輸出檔案的串列，并在另一個模塊中使用，用于PWA

我正在嘗試構建一個漸進式 Web 應用，并支持離線使用。

根據 MDN，使 PWA 脫機作業的方法是將所需資源添加到服務作業者的快取中。這需要服務作業者的代碼知道每個輸出檔案。理想情況下，這不應該被編碼，而應該由webpack生成，因為它知道自己生成了哪些檔案。

我正在為實際生成這個串列而苦惱。根據我的搜索，有兩個插件可以生成一個包含檔案串列的json檔案 - webpack-assets-manifest 和 webpack-manifest-plugin。我可以將這些檔案與單獨的目標結合起來，生成一個包含頁面檔案的清單。但我無法匯入清單，因為 webpack 在完成所有作業之前并沒有真正寫入清單。

我怎樣才能匯入一個入口點生成的檔案串列，并在另一個入口點/模塊中使用它們呢？

webpack.config.js:

const path = require（'path'）。
const WebpackAssetsManifest = require（'webpack-assets-manifest'）。


const frontend = {
    mode: "development"。
    entry: {
        page:"./src/page/page.tsx"。
    },
    devtool: 'inline-source-map',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /.html?$|.png$/,
                type: "asset/resource"。
                generator: {
                    filename: "[name][ext]"。
                },
            },
            {
                test: /.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/,
            },
            {
                test: /.json$/,
                type: "asset/resource",
                exclude: /node_modules/。
            }
        ],
    },
    resolve: {
        extensions: [".html", ".tsx", ".ts", ".js"] 。
    },
    plugins: [
        new WebpackAssetsManifest（ {
            output: "page-files.json"。
            writeToDisk: true,
        }),
    ]
};

const serviceworker = {
    mode: "開發"。
    entry: {
        服務員。"./src/serviceworker/serviceworker.ts"。
    },
    devtool: 'inline-source-map',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /.html?$|.png$/,
                type: "asset/resource"。
                generator: {
                    filename: "[name][ext]"。
                },
            },
            {
                test: /.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/,
            },
            {
                test: /.json$/,
                resourceQuery: /link/,
                type: "asset/resource"。
                exclude: /node_modules/。
            },
            {
                test: /.json$/,
                resourceQuery: /str/,
                type: "asset/source"。
                exclude: /node_modules/。
            }
        ],
    },
    resolve: {
        extensions: [".html", ".tsx", ".ts", ".js"] 。
    },
};

module.exports = [frontend, serviceworker];

serviceworker.ts:

import files from "././dist/page-files.json?str" ;
console.log（files）。

錯誤是：

Module not found: Error。Can't resolve '././dist/page-files.json? str' in '<REDACTED>/src/serviceworker'

（當我再次構建它時，它將找到之前構建的檔案）

uj5u.com熱心網友回復：

與其依賴預先存在的webpack插件來生成資產，我認為你需要為這個用例撰寫自己的插件。如果您希望該插件將清單寫入本身需要捆綁/編譯的條目，那么在該插件中創建一個child compilation將是實作這一目的的方法。

不幸的是，這不是一個簡單的任務，但你可以參考workbox-webpack-plugin的源代碼，它或多或少地做了你描述的事情，作為啟發。

另外...你可以直接使用InjectManifest，如果這符合你的使用情況。雖然它是Workbox系列庫的一部分，但InjectManifest實際上只做兩件事：通過子編譯處理你作為swSrc傳入的入口檔案，并在該swSrc檔案的任何地方用一個{url: '...', revision: '...'}條目，這些條目是根據主配置中的資產生成的，并通過任何include/exclude引數進行過濾。

因此，如果你不打算使用Workbox，你可以從你自己的代碼中使用那個self.__WB_MANIFEST值。

// service-worker.ts

const manifest = self.__WB_MANIFEST || [];

self.addEventListener('install', (event) => /span> {
  //你快取清單內容的代碼在這里。
});

//webpack.config.js

const {InjectManifest}= require('workbox-webpack-plugin') 。

module.exports = {
  //...其他webpack配置...。
  plugins: [
    new InjectManifest（ {
      swSrc: 'src/service-worker.ts'。
      swDest: 'service-worker.js',
      // ... exclude/include config here...。
    }),
  ],
};

uj5u.com熱心網友回復：

這種行為背后的原因是webpack并行地運行這2個配置。通過強迫webpack按順序運行，我們可以解決這個問題。

要進行串行處理，在你的webpack配置末尾添加module.exports.parallelism = 1;/code>。

module.exports=【frontend, serviceworker】。
module.exports.parallelism = 1;