वेबपैक 2 नोड-libs-browser बहिष्कृत?

Question

मैंने वेबपैक 2 में अपग्रेड किया है और मेरे बंडल आकार को हिलाते हुए पेड़ बढ़ने से पहले। जांच करते समय ऐसा क्यों लगता है कि मेरे पास bn.js और eliptic (नोड-लिब्स-ब्राउज़र की कुछ निर्भरताएं हैं - जो स्वयं वेबपैक 2 की निर्भरता है) जैसी बड़ी फ़ाइलें हैं। क्या इन्हें हटाने या उन्हें बाहर करने का कोई तरीका है? वेबपैक 1 में वे मेरे बंडल में नहीं जोड़े जा रहे थे।

Answer 1

समस्या

है, क्योंकि डिफ़ॉल्ट रूप से webpack अपने आंतरिक प्लगइन NodeSourcePluginhere या here for webworker लागू होता है, और आप एक मॉड्यूल भी crypto की तरह एक NodeJS मॉड्यूल का संदर्भ देता है, यानी अगर: var Crypto = canUseDom ? null : require("crypto"), webpack बड़ी फ़ाइलों NodeJS अनुकरण का एक समूह बंडल जाएगा । https://github.com/webpack/webpack/issues/4976 दायर की गई समस्या देखें।

समाधान किसी भी कोड से बचने के लिए है जो नोडजेएस आंतरिक मॉड्यूल का संदर्भ देता है, भले ही वे ब्राउज़र पर उपयोग नहीं किए जाते हैं।

इन्हें पकड़ने के लिए, आप target विकल्प को ओवरराइड करके NodeSourcePlugin निकाल सकते हैं।

const webpack = require("webpack"); 
const FunctionModulePlugin = require("webpack/lib/FunctionModulePlugin"); 

const output = { 
    path: process.cwd() + "/build", 
    filename: "bundle.[hash].js" 
}; 

{ 
    target:() => undefined, 
    output, 
    plugins: [ 
    new webpack.JsonpTemplatePlugin(output), 
    new FunctionModulePlugin(output), 
    new webpack.LoaderTargetPlugin("web"), 
    ] 
} 

संपादित करें: webpack 3 के साथ, यह अब के रूप में आसान है के रूप में:

const webpackConfig = { 
    node: false 
} 

आप कोड केवल और संदर्भ NodeJS मॉड्यूल, यह अपने स्वयं के मॉड्यूल में उन अलग करने के लिए बेहतर है सर्वर साइड के लिए है कि होना आवश्यक हैं , और package.json में browser फ़ील्ड के माध्यम से एक डमी कॉपी निर्यात करें।

संपादित करें: मैंने इस समस्या से संबंधित एक ब्लॉग यहां लिखा है https://medium.com/walmartlabs/webpack-optimization-a-case-study-92b130334b6c।