Webpack yêu cầu một loạt yêu cầu (yêu cầu chuỗi động)

Question

Tôi muốn yêu cầu danh sách các yêu cầu trong webpack. Ngay sau khi tôi thay thế tham số chuỗi của hàm require bằng một biến hoặc một hằng số, nó không thể tiêm yêu cầu nữa.

Dưới đây là một ví dụ hoàn hảo làm việc:

const angular = require('angular'); 

Nhưng ngay sau khi tôi thay đổi điều này để sau, nó không có tác dụng nữa:

const angularString = 'angular'; 
const angular = require(angularString); 

Mục tiêu của tôi là phải có một danh sách tĩnh của phụ thuộc và tiêm từng cái một, như sau:

const angularDependencies = [ 
    'angular-socket-io', 
    'angular-ui-router' 
]; 

for(var i = 0; i < angularDependencies.length; i++) { 
    require(angularDependencies[i]); 
} 

Đây là thông báo lỗi tôi nhận được:

WARNING in ./app/app.js 
Critical dependencies: 
14:1-14 the request of a dependency is an expression 
@ ./app/app.js 14:1-14 

WARNING in ./app ^\.\/.*$ 
Module not found: Error: a dependency to an entry point is not allowed 
@ ./app ^\.\/.*$ 

WARNING in ./app ^\.\/.*$ 
Module not found: Error: a dependency to an entry point is not allowed 
@ ./app ^\.\/.*$ 

Answer 1

Điều đó sẽ không hoạt động như WebPack là công cụ xây dựng phân tích các tệp nguồn của bạn để tập luyện những gì cần đưa vào. Nó không chạy mã của bạn để xem nó làm gì. Điều này có nghĩa là mã của bạn chỉ có thể bao gồm các chuỗi bên trong các câu lệnh yêu cầu.

Nếu bạn muốn viết mã theo cách này thì hãy xem SystemJS thay vì WebPack.

https://github.com/systemjs/systemjs

Answer 2

Webpack hỗ trợ năng động đòi hỏi nhưng bạn cần phải nói với nó như thế nào để tìm các tập tin sử dụng contexts. Bạn có thể thử một cái gì đó như thế trước khi đòi hỏi các module của bạn:

var req = require.context(".", true, /^angular-.+$/) 
req("angular-thing") 

Nếu một cái gì đó giống như điều đó không làm việc, bạn sẽ cần phải sử dụng một cách tiếp cận khác nhau trong mã của bạn vì WebPack cần phải biết những gì module bao gồm trong của bạn gói trên thời gian biên dịch.

Answer 3

Tạo angularDependencies.js:

module.exports = [ 
    'angular-socket-io', 
    'angular-ui-router' 
]; 

Sau đó thêm nó vào webpack.config.jsentry section. Nó sẽ giống như sau:

require('./src/angularDependencies').concat(['./myApp.js'])