yükleyiciler

Web paketi yükleyicileri “preLoaders”, “loaders” ve “postLoaders” olarak yapılandırılabilir. Olmaları gerekmese de, linting veya diğer zorunlu veya seri işlemleri kullanan yapılandırmalar, işlem hattındaki bu oluşturma aşamalarından yararlanabilir.

Yükleyicileri ve bunların kullanımını anlamanın anahtarı, Webpack’in gerekli grafikteki her modülü yükleyici sistemi aracılığıyla çalıştırmasıdır. Yukarıdaki örneğe göre, bu, Webpack uygulamanızın içe aktarmaları arasında gezinmeye başladığında, gereken dosyaları belirleyeceği ve basit bir normal ifade kullanarak hangi dosya veya dosya türünün hangi yükleyici veya yükleyici dizisini gerektirdiğini belirleyeceği anlamına gelir.

Yukarıda tüm “.js” veya “.jsx” dosyalarının preLoader aşamasında eslint-loader tarafından es-linte edileceğini görebilirsiniz. Diğer “js|x” dosya türleri de ana yükleyici aşamasında babel-loader aracılığıyla çalıştırılacaktır. Ayrıca, aynı aşamada, herhangi bir “.scss” dosyası sass-loader‘a yüklenecektir. Bu, JS modüllerinizdeki Sass dosyalarını içe aktarmanıza ve bunların sonuçta elde edilen JS paketine veya hatta başka bir ayrı bağımsız CSS paketine (bir eklenti kullanarak) gönderilmesini sağlar.

Not: .scss dosyalarını içe aktarmak yalnızca Web paketi ve uygun bir yükleyici ile çalışır. Düğüm, bir ön işlemci veya aktarıcı olmadan bu tür bir içe aktarmayı anlamayacaktır.

Ayrıca, “.scss” örneğindeki not, farklı yükleyiciler arasında “!” ünlem işaretini bir “boru” olarak kullanarak yükleyicileri “zincirleme” yeteneğidir. Yukarıdaki örnek, “sass-loader” çıktısını “css-loader"a ve son olarak “style-loader"a yönlendirir. -loader’, ‘sass-loader’]`. Satır içi yükleyici tanımları ve URL’lerde yaygın olarak bulunan sorgu parametre sözdizimini takip etmek için farklı seçenekler de mevcuttur.

Ayrıca bakınız: https://webpack.github.io/docs/loaders.html

Eslint için preLoader, jsx için babel ve css loader zincirleme kullanarak yapılandırma. #

Aşağıdaki yapılandırma, projenizi bir kitaplık olarak gruplamak için temel yapılandırma olarak kullanılabilir. Modül yapılandırmasının nasıl bir ön yükleyici ve yükleyici listesi içerdiğine dikkat edin.

// webpack.config.js

var path = require('path');

module.exports = {
    entry: path.join(__dirname, '..', 'src/index.js'),
    output: {
        path: path.join(__dirname, '..', '/lib'),
        filename: outputFile,
        library: 'myCoolBundle.js',
        libraryTarget: 'umd',
        umdNamedDefine: true
    },
    module: {
        preLoaders: [
            {
                test: /(\.jsx|\.js)$/,
                loader: "eslint-loader",
                exclude: /node_modules/,
            }
        ],
        loaders: [
            {
                test: /(\.jsx|\.js)$/,
                loader: ['babel'],
                exclude: /(node_modules)/,
                include: path.join(__dirname, '..'),
                query: {
                    presets: [ 'es2015', 'react']
                }
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader!sass-loader"]
            }
        ]
    },
    resolve: {
        root: path.resolve(__dirname, '..', './src'),
        extensions: ['', '.js', '.jsx', '.scss'],
        fallback: path.join(__dirname, '../node_modules')
    },
    eslint: {
        configFile: path.resolve(__dirname, '..', '.eslintrc'),
    }
};