वेबपैक

Question

के साथ सीएसएस ऑटोप्रिफ़िक्सर मैं कम और ऑटोप्रिफ़िक्सर के साथ वेबपैक को कॉन्फ़िगर करने का प्रयास कर रहा हूं, लेकिन ऑटोप्रिफ़िक्सर काम नहीं कर रहा है। मेरी सीएसएस या कम फ़ाइलें autoprefixed नहीं हैं। उदाहरण: display: flex रहता display: flex

मैं नीचे मेरी webpack config डाल दिया है:

var autoprefixer = require('autoprefixer'); 

module.exports = { 
    entry: { 
    bundle: "./index.jsx" 
    }, 
    output: { 
    path: __dirname, 
    filename: "[name].js" 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx$/, 
     exclude: /(node_modules|bower_components)/, 
     loaders: ['react-hot', 'babel-loader'] 
     }, 
     { 
     test: /\.less$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader!less-loader") 
     }, 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader!postcss-loader") 
     } 

    ], 
    postcss: function() { 
     return [autoprefixer]; 
    } 
    }, 
    plugins: [ 
    new webpack.BannerPlugin(banner), 
    new ExtractTextPlugin("style.css") 
    ], 
    devtool: 'source-map', 
    devServer: { 
    stats: 'warnings-only', 
    } 
}; 

Answer 1

तो समस्या मिली। मुझे मूर्खतापूर्ण, पोस्टसीएसएस ब्लॉक को वेबपैक कॉन्फ़िगरेशन के तहत सीधे होना चाहिए, मैंने इसे मॉड्यूल ब्लॉक में रखा था। मेरी गलती।

संपादित करें: इस है कि यह कैसे किया जाना चाहिए था है:

var autoprefixer = require('autoprefixer'); 

module.exports = { 
    ... 
    postcss: function() { 
     return [autoprefixer]; 
    } 
    ... 
}; 

तो बजाय यह मॉड्यूल ब्लॉक के अंदर डालने की, मैं मुख्य ब्लॉक के तहत सीधे यह डाल करने के लिए के रूप में ऊपर दिखाए था।

Answer 2

आप पुराने ब्राउज़र संस्करणों के लिए अपने webpack config में postcss स्थापित करने के लिए की आवश्यकता होगी।

ऑटोप्रिफ़िक्सर के लिए डिफ़ॉल्ट ब्राउज़र या ब्राउज़र के पिछले 2 संस्करण हैं जिनमें कम से कम 5% बाजार हिस्सेदारी है।

https://github.com/postcss/autoprefixer#browsers

postcss: [ 
    autoprefixer({ 
     browsers: ['last 3 versions', '> 1%'] 
    }) 
    ], 

इसमें कहा गया है कि आप ब्राउज़र या ब्राउज़र वाले कम से कम 1% शेयर बाजार की पिछले 3 संस्करणों समर्थन कर रहे हैं।

Answer 3

मुझे वेबपैक 2.x.x के साथ एक समान समस्या थी और कॉन्फ़िगरेशन में कस्टम गुणों की अब अनुमति नहीं है। मुझे इस अन्य एसओ पोस्ट पर एक समाधान मिला: Using auto prefixer with postcss in webpack 2.0। जहां सभी लोडर विकल्प प्लगइन्स परिभाषित करने की जरूरत

Webpack 2.xx शुरू की webpack.LoaderOptionsPlugin() प्लगइन: कुछ अज्ञात कारण से इस लिंक पर 404 तक ले जाएगा के लिए मामले में मैं सबसे अधिक प्रासंगिक जवाब यहां संकलन । जैसे, autoprefixer postcss-loader के लिए एक प्लगइन है। तो, इसे यहाँ जाना है। न्यू config इस तरह दिखना चाहिए:

module: { 
    rules: [ 
    { 
     test: /\.scss$/, 
     loaders: ['style-loader', 'css-loader', 'sass-loader', 
     'postcss-loader'] 
    } 
    ] 
}, 

plugins: [ 
    new webpack.LoaderOptionsPlugin({ 
    options: { 
     postcss: [ 
     autoprefixer(), 
     ] 
    } 
    }) 
], 

यह मेरे लिए काम किया, लेकिन के रूप में Kreig ने उल्लेख किया (LoaderOptionsPlugin की कोई आवश्यकता नहीं) है। अब आप लोडर घोषणा करने के लिए सीधे विकल्पों पारित कर सकते हैं:

const autoprefixer = require('autoprefixer'); 

let settings = { 
/*...*/ 
    module: { 
    rules: [{ 
     test: /\.css$/, 
     use: [ 
      /*...other loaders...*/ 
      { 
      loader: 'postcss-loader', 
       options: { 
       plugins: function() { 
        return [autoprefixer] 
       } 
       } 
      } 
      /*...other loaders...*/ 
     ] 
    }] 
    }   
} 
/*...*/ 

बात मैं Webpack 2.5.1 के साथ 2 की कोशिश की है, लेकिन यह विफल रहा है। क्रेडिट्स प्रणेश रवि और क्रेग जाते हैं।