Carregadores

Os carregadores do Webpack podem ser configurados como “preLoaders”, “loaders” e “postLoaders”. Embora não precisem ser, as configurações que usam linting ou outras operações imperativas ou seriais podem aproveitar esses estágios de construção no pipeline.

A chave para entender os loaders e seu uso é que o Webpack executará cada módulo no gráfico require por meio do sistema loader. Seguindo o exemplo acima, isso significa que, à medida que o Webpack começar a rastrear as importações de seu aplicativo, ele identificará os arquivos necessários e, usando um regex simples, determinará qual arquivo ou tipo de arquivo requer qual carregador ou série de carregadores.

Acima você pode ver que todos os arquivos “.js” ou “.jsx” serão es-lint pelo eslint-loader na fase de preLoader. Outros tipos de arquivo js|x também serão executados através do babel-loader na fase do carregador principal. Além disso, na mesma fase, quaisquer arquivos .scss serão carregados no sass-loader. Isso permite que você importe arquivos Sass em seus módulos JS e faça com que eles sejam enviados para o pacote JS resultante ou até mesmo outro pacote CSS independente separado (usando um plugin).

Observação: A importação de arquivos .scss só funcionará com Webpack e um carregador apropriado. O Node não entenderá esse tipo de importação sem um pré-processador ou transpilador.

Também digno de nota no exemplo .scss é a capacidade de “encadear” carregadores usando o ponto de exclamação ! como um “pipe” entre diferentes carregadores. O exemplo acima canaliza a saída do “sass-loader” para o “css-loader” e finalmente para o “style-loader” Isso também pode ser executado com um array de loaders: ['style-loader', 'css -loader', 'sass-loader']. Diferentes opções também estão disponíveis para definições de carregador embutido e seguem a sintaxe de consulta parâmetro comumente encontrada em URLs.

Veja também: https://webpack.github.io/docs/loaders.html

Configure usando preLoader para eslint, babel para jsx e css loader chaining. #

A configuração a seguir pode ser usada como uma configuração básica para agrupar seu projeto como uma biblioteca. Observe como a configuração do módulo contém uma lista de preLoaders e loaders.

// 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'),
    }
};