Tìm kiếm trang web

javascript - Cách Tìm Các Chunk cho Một Entry của Webpack

Tôi đang sử dụng webpack để hiện đại hóa một ứng dụng ASP.NET Web Forms nhiều trang cũ. Tôi đã khá thành công với nó cho đến khi tôi thử sử dụng SplitChunksPlugin để loại bỏ trùng lặp cho các bundle của mình bằng tùy chọn chunks: 'all'. Thật không may, điều này tạo ra một số bundle JS bổ sung mà tất cả đều cần được bao gồm trong các thẻ script cùng với bundle entry gốc. Không có gì ngạc nhiên, tài liệu được liên kết ở trên cũng nói rõ điều này:

Theo mặc định, [plugin] chỉ ảnh hưởng đến các phần theo yêu cầu, vì thay đổi các phần ban đầu sẽ ảnh hưởng đến các thẻ script mà tệp HTML cần bao gồm để chạy dự án.

Nhưng tôi rất muốn các phần nhập ban đầu đó được tách ra, vì vậy tôi đang cố gắng tìm cách để đưa tất cả các phần bổ sung đó vào các thẻ script. Dường như lời khuyên phổ biến ở đây là sử dụng HtmlWebpackPlugin để tạo một trang HTML với tất cả các thẻ script được bao gồm, nhưng điều này không hiệu quả với tôi (ít nhất là trong cấu hình mặc định của nó) vì ít nhất hai lý do:

  1. Đây là một dự án Web Forms. Người ta không thể đơn giản can thiệp vào các tệp aspx.
  2. Ngay cả khi tôi tìm ra cách để tạo một số tệp aspx hợp lệ mỗi khi tôi chạy webpack (tôi cho rằng điều đó có thể làm được, nhưng đây là khó khăn chính); có vẻ như HtmlWebpackPlugin chỉ tạo các thẻ script cho tất cả các chunk, hoặc một tập hợp con được chọn thủ công trong số chúng (sử dụng tùy chọn chunks: []).

Để giải thích thêm về điểm thứ hai đó, và đi đến câu hỏi của tôi -- tôi có thể thực hiện một số phân tích thủ công các phần đã tách để xây dựng một đồ thị phụ thuộc và thủ công đưa từng phần vào aspx, nhưng rõ ràng đó không phải là một cách tiếp cận có thể duy trì. Tôi đã hy vọng HtmlWebpackPlugin có thể cung cấp một cách nào đó để ít nhất chỉ ra rằng phần này cuối cùng được sử dụng bởi entry này, hoặc entry này sử dụng các phần này, v.v., nhưng tôi chưa tìm thấy bất kỳ mối quan hệ nào như vậy trong kết quả đầu ra của nó.

Có cách nào mà không cần trải qua các bước hack để tự động xác định chunk nào trong các chunk được tách ra là phụ thuộc của một chunk nhập liệu nhất định không?

Câu trả lời #1

Cài đặt plugin này với tùy chọn vào cấu hình webpack của bạn:

npm install webpack-manifest-plugin --save-dev
// webpack.config.js

const ManifestPlugin = require('webpack-manifest-plugin')

concatMerge(configuration, {
  // ...
  plugins: [
    new ManifestPlugin({
      fileName: 'prod.manifest.json',
      generate: (seed, files) => {
        const entrypoints = new Set()
        files.forEach(
          (file) => ((file.chunk || {})._groups || []).forEach(
            (group) => entrypoints.add(group)
          )
        )
        const entries = [...entrypoints]
        const entryArrayManifest = entries.reduce((acc, entry) => {
          const name = (entry.options || {}).name
            || (entry.runtimeChunk || {}).name
          const files = [].concat(
            ...(entry.chunks || []).map((chunk) => chunk.files)
          ).filter(Boolean)
          return name ? {...acc, [name]: files} : acc
        }, seed)
        return entryArrayManifest
      }
    }),
  ],
}

Nó sẽ tạo ra một prod.manifest.json chứa các phần cho mỗi mục nhập hoặc tuyến đường:

{
  "entryOne": [
    "main.common.d7791ce7a1e7ba394.css",
    "main.common.d7791ce7a1e7ba394.js",
    "main.entryOne.eb614be915641d465.js"
  ],
  "a-route": [
    "main.common.d7791ce7a1e7ba394.css",
    "main.a-routes.14b91be915641d465.js"
  ]
  // ...
}

Câu trả lời #2

Đơn giản hơn, để có kết quả giống như @Junior Tour, bạn cũng có thể sử dụng tham số entries của thuộc tính generate:

plugins: [
    new WebpackManifestPlugin(
    {
        fileName: 'prod.manifest.json',
        generate: (seed, files, entries) => {
            return entries;
        }
    }),
],