Настройки для сборки

Конфигурация webpack для сборки проекта мало чем отличается от кофигурации для запуска.

Тем кто не различает старт и сборку объясняю.

Старт конфигурация используется для запуска локального сервера разработки, который будет доступен по адресу localhost:8080. В этом случае webpack собирает исходники проекта в один виртуальный (находящийся в оперативной памяти) файл, который используется в индексном файле public/index.html. Как должен называтся этот виртуальный файл и по какому пути он будет доступен, webpack берет из параметров output.filename и output.publicPath, соответственно. От того что файл находится в оперативной памяти он быстро реагирует на внесенные нами в проект изменения и моментально пересобирается.

Сборка используется, как правило, когда проект уже готов к релизу. В этом случае webpack соберет проект в один файл и сохранит его на диске. При этом, отключаются все отладочные сообщения и результирующий файл минимизируется. Таким образом, файл готов к деплою.

Вот как выглядит файл настроек webpack-build.config.js для сборки проекта:

const path = require('path');
const webpack = require('webpack');

const ROOT_DIR = path.resolve(__dirname);
const SRC_DIR = path.join(ROOT_DIR, 'src');
const DIST_DIR = path.join(ROOT_DIR, 'dist');

module.exports = {
    entry: path.join(SRC_DIR, 'main.jsx'),
    output: {
        path: DIST_DIR,
        filename: 'bundle.min.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.jsx?$/,
                exclude: /node_modules/,
                include: [SRC_DIR]
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new webpack.optimize.UglifyJsPlugin()
    ]
};

Здесь хочу остоновится на плагинах. Я использую два плагина. Первый чтобы установить переменную среды NODE_ENV в значение production. Благодаря этому отключается вывод всей отладочной информации которая полезна только при разработке приложения. Второй плагин минимизирует результирующий файл.

Архитектура webpack разработана таким образом, что его очень легко рассширять плагинами. Написать свой плагин тоже не состовляет никакого труда — в документации очень хорошо описано как это делается.