Конфигурация webpack

Как правильно сконфигурировать webpack

1. Создаем файл webpack.config.js в корнефой папке

2. Прописываем ввод (в данном случае 2 файла из корнефой директории)

module.exports = {
    entry: {
        main: ['./script.js', './script2.js']
     }
}

3. Прописываем вывод (файл main.js в катологе public/js)

module.exports = {
    entry: {
        main: ['./script.js', './script2.js']
     },
     output: {
         filename: './public/js/[name].js'
     }
}

Это самый простой пример конфигурации webpack в истории.

Чтобы запустить - просто набираем в командной строке webpack.

Включаем Babel

Сначала npm install babel-loader --save. Затем добавляем секцию module в конфигурацию webpack.

module.exports = {
    entry: {
        main: ['./script.js', './script2.js']
     },
     output: {
         filename: './public/js/[name].js'
     },
     module: {
         loaders: {
                 test: /\.js$/,
                     exclude: /node_modules/,
                     loader: 'babel'
             }
     }
}

"test:" - проводит проверку на соответствие файла нужнум параментрам (например расширение .js), чтобы решить нужно ли передать его лоадеру.

Теперь попрубуем настроить webpack для работы c React.js

Все что нужно это заменить расширение .js на .jsx и не забыть знак вопроса. Ну и избавится от абстактных script и script2.

module.exports = {
    entry: {
        main: ['./src/main.js'] //Новая точка входа
     },
     output: {
         filename: './public/js/[name].js'
     },
     module: {
         loaders: {
                 test: /\.jsx?$/,
                     exclude: /node_modules/,
                     loader: 'babel'
             }
     }
}

И ещё стоит создать файл .babelrc в корневом каталоге и добавить в него код включающий все возможности babel.

{
    "stage": 0
}