Webpack и React с Babel

Начало работы с webpack

Для начала нужно установить webpack глобально: npm install -g webpack.

Затем инициализировать новый npm проект: npm init.

Так же необходимо установить webpack локально: npm install --save-dev webpack@1.12.13.

Далее создаем файл: webpack.config.js в корневом каталоге проекта. Для начала пропишем следующий код:

module.exports = {
    entry: './assets/app.js',

    output: {
        path: __dirname,
        filename: './public/js/bundle.js'
    },

    resolve: {
        extensions: ['', '.js', '.jsx']
    }
};

Свойство entry обозначает точку входа, то есть главный модуль javascript кода. output, соответственно обозначает куда будет помещён скомпилированный код. В объекте resolve размещено свойство extensions, которое содержит массив из допустимых расширений файлов, обрабатываемых webpack.

Установка React и Babel

Возьмем за основу React версии 0.14.7:

npm install --save react@0.14.7 react-dom@0.14.7

Затем установим подходящую версию babel:

npm install --save-dev babel-core@6.5.1 babel-loader@6.2.2 babel-preset-es2015@6.5.0 babel-preset-react@6.5.0 babel-preset-stage-0@6.16.0

Дополнение webpack.config.js

module.exports = {
    entry: './assets/app.jsx',

    output: {
        path: __dirname,
        filename: './public/js/bundle.js'
    },

    resolve: {
        root: __dirname, // Set the root in order to make components load without specifying the path
        alias: {},
        extensions: ['', '.js', '.jsx']
    },

    module: {
        loaders: [
            {
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-0']
                },
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/
            }
        ]
    }
};

Во-первых заменим app.js на app.jsx - стандартный формат для React. Во-вторых добавляем объект module, а внем создадим массив объектов loaders. Свойство loader - это соответственно загрузчик babel-loader, query означает параметры загрузчика - то есть через что нужно пропустить код: stage-0 трансформирует самые новые фишки JS, es2015 - компилирует es6 в старый формат JS, ну а react - соответственно отвечает за компиляцию React. Свойство test проверяет формат файла на соответствие .js или .jsx. А exclude не допускает попадание под компилятор файлов пакетов Node и Bower.