Tham số tùy chỉnh máy chủ webpack dev từ dòng lệnh

Question

Tôi muốn chuyển thông số tùy chỉnh từ dòng lệnh. Một cái gì đó như thế này:

webpack-dev-server --inline --hot --customparam1=value 

Chính xác những gì tôi đang cố gắng đạt được là tôi đang làm việc trên một ứng dụng bộ nạp vé. Ứng dụng này có một số dịch vụ tìm nạp dữ liệu.

Tôi có một ứng dụng khác hoạt động như máy chủ api. Chúng ta cần các ứng dụng chạy trong 2 cách (vì tất cả các thành viên của nhóm nghiên cứu của chúng tôi không có quyền truy cập vào máy chủ api)

Vì vậy, dịch vụ đó có 2 cách để có được dữ liệu:

1) Nếu máy chủ api là chạy (đối với đội ngũ dev), sử dụng http cuộc gọi để nhận dữ liệu từ localhost

2) Nếu máy chủ api không chạy (đối với đội ngũ thiết kế), chỉ cần sử dụng dữ liệu tĩnh đã có trong các dịch vụ:

var someData; 
if (customparam1 === "withApi"){ 
    someData=getData("http://localhost:8081/apiendpoint"); 
} else { 
    someData=[ 
     {a:b}, 
     {c:d}, 
     // more custom array of static data 
     ..... 
    ] 
} 

Vì vậy, customparam1 này được cho là được chuyển từ dòng lệnh webpack-dev-server và theo tài liệu this, không có cách nào tồn tại mà tôi có thể tìm thấy (tôi có bỏ sót điều gì không?)

Làm cách nào để làm điều đó?

PS: Tôi đang trên webpack 1.12.1

Answer 1

Bạn có thể sử dụng tùy chọn --define, trong đó có var=value như là đối số. Webpack sẽ chỉ thay thế tất cả các lần xuất hiện với giá trị. Ví dụ với đoạn mã sau:

if (ENABLE_API) { 
    // Use api 
} else { 
    // Use static data 
} 

Khi bạn chạy:

webpack-dev-server --inline --hot --define ENABLE_API 

nó sẽ gây ra:

if (true) { 
    // Use api 
} else { 
    // Use static data 
} 

Bạn cũng sẽ cần phải chạy nó với --define ENABLE_API=false, nếu không nó sẽ ném một lỗi mà ENABLE_API không được xác định. Vì nó là một thay thế văn bản đơn giản, giá trị bạn vượt qua sẽ được chèn vào như vậy, vì vậy nếu bạn muốn một chuỗi bạn phải sử dụng '"value"' (lưu ý dấu ngoặc kép bên trong dấu ngoặc kép), nếu không nó được hiểu là JavaScript thông thường, nhưng tôi không thể nhận được một chuỗi để làm việc từ dòng lệnh.

Bạn có thể đạt được chính xác tương tự bằng cách sử dụng webpack.DefinePlugin (Tôi đã liên kết tài liệu webpack 2, nhưng nó hoạt động tương tự trong webpack 1). Với điều đó bạn có thể có các thay thế phức tạp hơn và cũng có thể sử dụng các tiện ích như JSON.stringify để tạo một phiên bản chuỗi. Ví dụ để khắc phục những vấn đề với đi qua một chuỗi từ dòng lệnh, bạn có thể sử dụng:

new webpack.DefinePlugin({ 
    API_TYPE: JSON.stringify(process.env.API_TYPE) 
}) 

Và chạy với biến môi trường API_TYPE thiết lập để withApi:

API_TYPE=withApi webpack-dev-server --inline --hot 

và mỗi API_TYPE sẽ được thay thế với chuỗi 'withApi', nếu bạn không chỉ định nó, nó sẽ không được xác định.

Answer 2

Tôi không như vậy chắc chắn, nhưng thường tôi làm điều này để môi trường riêng biệt:

lệnh:

NODE_ENV=development webpack-dev-server 

webpack.config.js (plugin):

... 
plugins:[ 
    new webpack.DefinePlugin({ 
    'process.env': { 
     NODE_ENV: JSON.stringify('production') 
    } 
    }) 
] 
... 

chính js file:

if(process.env.NODE_ENV !== 'production') { ... } 

---

Tôi không nghĩ webpack-dev-server có khả năng phân tích các thông số tùy chỉnh, nhưng bạn có thể thử một cái gì đó như thế này:

lệnh:

webpack-dev-server --customparam1=value 

webpack.config.js:

var path = require("path"); 
var webpack = require("webpack"); 

function findPara(param){ 
    let result = ''; 
    process.argv.forEach((argv)=>{ 
     if(argv.indexOf('--' + param) === -1) return; 
     result = argv.split('=')[1]; 
    }); 
    return result; 
} 

const customparam1 = findPara('customparam1'); 

module.exports = { 
    ... 
    plugins: [ 
     new webpack.DefinePlugin({ 
      customparam1:JSON.stringify(customparam1) 
     }) 
    ] 
}; 

chính tập tin js:

if(customparam1 === xxx){ ... }