webpack => Погрузчики

замечания

Погрузчики Webpack можно настроить как «preLoaders», «loaders» и «postLoaders». Хотя они не обязательно должны быть, конфигурации, которые используют листинг или другие императивные или последовательные операции, могут использовать преимущества этих этапов сборки в конвейере.

Ключом к пониманию загрузчиков и их использованием является то, что Webpack будет запускать каждый модуль в графе потребности через систему загрузчика. Следуя приведенному выше примеру, это означает, что по мере того, как Webpack начнет сканирование через импорт вашего приложения, он определит необходимые файлы и использует простое регулярное выражение, определит, какой тип файла или файла нужен какой загрузчик или серия загрузчиков.

Выше видно, что все файлы «.js» или «.jsx» будут загружаться с помощью eslint-loader в фазе preLoader. Другие типы файлов js|x также будут выполняться через загрузчик babel в фазе основного загрузчика. Кроме того, в той же фазе любые файлы .scss будут загружены в sass-loader . Это позволяет импортировать файлы Sass в ваших JS-модулях и выводить их в результирующий пакет JS или даже другой отдельный отдельный комплект CSS (с помощью плагина ).

Примечание. Импорт файлов .scss будет работать только с Webpack и соответствующим загрузчиком. Узел не будет понимать этот вид импорта без предварительного процессора или транспилятора.

Также примечание в примере .scss - это возможность «цепочки» загрузчиков с помощью ! восклицательный знак как «труба» между различными погрузчиками. В приведенном выше примере выводится вывод «sass-loader» в «css-loader» и, наконец, в «загрузчик стиля». Это также может быть выполнено с помощью массива loaders: ['style-loader', 'css-loader', 'sass-loader'] . Различные параметры также доступны для встроенных определений загрузчика и следуют синтаксису параметров запроса, обычно найденному в URL-адресах.

См. Также: https://webpack.github.io/docs/loaders.html

Конфигурирование с помощью preLoader для eslint, babel для jsx и css загрузчика.

Следующая конфигурация может использоваться в качестве базовой конфигурации для объединения вашего проекта в виде библиотеки. Обратите внимание, как конфигурация модуля содержит список preLoaders и загрузчиков.

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

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

webpack
Погрузчики

Поиск…

замечания

Конфигурирование с помощью preLoader для eslint, babel для jsx и css загрузчика.