Tôi làm cách nào để xây dựng gói webpack nhập mô-đun từ một gói điểm nhập khác?

Question

Tôi đang cố tạo gói webpack thứ hai phụ thuộc vào gói khác. Mỗi trang cần bó-một, nhưng chỉ một số trang cần gói hai.

Ví dụ, giả sử tôi có kịch bản điểm vào sau (đây là những ví dụ tầm thường, chỉ cần sử dụng chúng đến được những điểm trên):

bó one.js

import $ from 'jquery'; 
$(document).data('key', 'value'); 

bó two.js

import $ from 'jquery'; 
const value = $(document).data('key'); 

tôi biết rằng tôi có thể sử dụng CommonsChunkPlug để tạo tệp commons.js chứa trình tải WebPack và jQuery, nhưng điều đó sẽ yêu cầu tải cả commons.js và bundle-one.js trên mọi trang, ngay cả khi tôi không cần tải bundle-two.js. Vì vậy, về cơ bản: có cách nào để xây dựng bundle-one.js làm gói JavaScript "chính" cho tất cả các trang của tôi không, và sau đó có thiết lập bundle-two.js để tải jQuery từ bundle-one.js không? Không.

Answer 1

Lựa chọn 1

Có hai configs Webpack riêng biệt, một cho mỗi cụm. Trong gói đầu tiên của bạn, bằng cách sử dụng expose jQuery as a global variable when you first require itexpose-loader:

loaders: [ 
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' } 
] 

Sau đó, trong bó cấu hình thứ hai của bạn, tell Webpack that jQuery is "external" và không nên được đóng gói với phần còn lại của các mã:

{ 
    externals: { 
     // require("jquery") is external and available 
     // on the global var jQuery 
     "jquery": "jQuery" 
    } 
} 

Bằng cách này, gói đầu tiên hiển thị jQuery dưới dạng biến toàn cầu, sau đó gói thứ hai tìm biến toàn cầu thay vì bao gồm nguồn.

Lựa chọn 2

Tôi không chắc chắn nếu điều này sẽ làm việc, nhưng CommonsChunkPlugin documentation nói rằng bạn có thể chỉ định các tùy chọn cấu hình name như một đoạn hiện. Bạn hãy thử đặt tên thành tên đoạn nhập điểm bundle1 của bạn và trong lý thuyết jQuery (và các libs khác được yêu cầu trên tất cả các khối) sẽ được tích hợp vào gói 1 và không phải gói 2.

Answer 2

Bạn có thể thực hiện việc này theo cách sau sử dụng plugin cung cấp -

//webpack.config.js 
module.exports = { 
    entry: './index.js', 
    output: { 
    filename: '[name].js' 
    }, 
    externals: { 
    jquery: 'jQuery' 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
    }) 
    ] 
}; 

Điều này có thể hữu ích cho việc tái cấu trúc mã cũ với nhiều tệp khác nhau tham chiếu $.