उपयोग webpack

Question

मैं index.html में एक चर कि इस तरह दिखता है बदलने के लिए कोशिश कर रहा हूँ में स्ट्रिंग-बदलें-लोडर के साथ एचटीएमएल-webpack-प्लगइन:

{ 
    test: /index\.html$/, 
    loader: 'string-replace', 
    query: { 
     search: '$variable', 
     replace: 'stuff to inject', 
    }, 
    } 

loaders सरणी में, और उसके बाद plugins में:

new HtmlWebpackPlugin({ 
    template: conf.path.src('src/index.html'), 
    inject: true, 
}) 

में

लेकिन इस सेटिंग परिणाम:

ERROR in ./~/html-webpack-plugin/lib/loader.js!./src/index.html Module parse failed (...) Unexpected token (1:0) You may need an appropriate loader to handle this file type.

तुम क्या इस कारण हो सकता है या मैं यह कैसे डीबग कर सकते हैं किसी भी विचार है?

Answer 1

यह string-replace-plugin की वजह से एक स्ट्रिंग को निर्यात करने वाले मॉड्यूल की अपेक्षा करता है। आपको HTML फ़ाइल को CommonJS मॉड्यूल में कनवर्ट करना चाहिए।

उदाहरण के लिए, इस raw-loader का उपयोग करके तरीका है:

पहले html में सामग्री की विशेषता के लिए उद्धरण जोड़ने

<meta name='author' content='$variable'>` 

और

{ 
    test: /index\.html$/, 
    loader: 'string-replace?search=$variable&replace=stuff to inject!raw' 
    } 

Answer 2

Konstantin का जवाब ठीक काम करता है और है अच्छा अगर आप एक मूल्य को प्रतिस्थापित करना चाहते हैं। मैं एक से अधिक मान को बदलने के लिए करना चाहता था तो मेरे loaders सरणी

{ 
    test: /\.html$/, 
    loader: 'raw' 
    }, 
    { 
    test: /\.html$/, 
    loader: 'string-replace', 
    query: { 
     multiple: [ 
     {search: '$variable1', replace: 'replacement 1'}, 
     {search: '$variable2', replace: 'replacement 2'} 
     ] 
    } 
    } 

कुंजी परिवर्तन पहले raw लोडर के माध्यम से अपने html फ़ाइल को चलाने के लिए है करने के लिए निम्न जोड़ा, और फिर आप string-replace-loader के लिए सभी सामान्य config उपयोग कर सकते हैं।