конфигурация webpack 1 для bundle.js

//плагин для сборки css файлов в единый, хотя может собирать и в 
//разные, зависит от задачи, тут подключение, настройка ниже. 
 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
 
//теперь экспортируем объект с настройками 
 
module.exports = { 
 
//тут у нас точка входа для js и прочих файлов, например style -  
//это css. Чтобы собрать все в единый файл, тебе нужно подключить 
//все разрозненые js к точке входа, тоесть все твои js файлы 
//должны быть импорированы в index.js 
//webpack позволяет собирать и разные js-файлы, тогда будет вот  
//такая запись: 
/* 
entry: { 
        bundle1: './app/index1', //путь к файлу. 
        bundle2: './app/index2' 
    }, 
*/ 
 
    entry: { 
        bundle: './app/index', //путь к файлу. 
        style: './app/css/style' 
    }, 
 
//это выход 
    output: { 
//куда сохраняем js, сейчас в корневом каталоге 
        path: __dirname, 
//корректное обновление ссылок в файлах при билде 
        publicPath: '/', 
//название файла, можно задать руками, можно генерить по имени 
//точки входа, как сейчас 
        filename: '[name].js' 
    }, 
 
    //если кратко, то это позволяет указать, какие типы файлов 
    //искать в точке входа (less, sass и т.д.) 
    //Важный момент - первый параметр не должен быть пустым! 
    //Как видишь, у меня стоит в нем пробел. 
 
    resolve: { 
        extensions: [' ', '.js', '.css'] 
    }, 
 
//теперь задаем правила нашей сборки 
    module: { 
        rules: [ 
  //пишешь на es6? значит нужен пакет babel, ниже его настройка 
            { 
  //указываем, какой тип файлов нужно искать для сборки 
                test: /\.js$/, 
  //исключая какие папки 
                exclude: [/node_modules/], 
  //использование загрузчиков с пресетами 
  //значит, кроме babel, нужно установить пакет пресетов 
  //babel-preset-es2015 
                use: [{ 
                    loader: 'babel-loader', 
                    options: { presets: ['es2015'] } 
                }] 
            }, 
 
    //тоже самое, только с css, по настройкам там все просто, 
    //посмотри инфу по ExtractTextPlugin и css-loader 
            { 
                test:   /\.css$/, 
                use: ExtractTextPlugin.extract({ 
                        fallback: { loader: 'style-loader' }, 
                        use: { 
                            loader: 'css-loader', 
                            options: { 
                                import: true, 
                                url: true 
                            } 
                        } 
                    }) 
            }, 
             
     //тут настраиваем file-loader, чтобы при сборке все картинки 
  //и шрифты сохранялись в нужные нам папки с правильными ссылками 
            { 
                test:   /\.(svg|ttf|eot|woff|woff2)$/, 
                loader: 'file-loader?name=[name].[ext]&publicPath=&outputPath=../css/fount/' 
            }, 
            { 
                test:   /\.(png|jpg|svg)$/, 
                loader: 'file-loader?name=[name].[ext]&publicPath=&outputPath=../css/img/' 
            } 
        ] 
    }, 
 
//говорим webpack, что подключили внешний плагин, плюс некоторые 
//ручные настройки, которые врядли тебе сейчас понадобятся. 
//В документации все подробно описано. 
    plugins: [ 
        new ExtractTextPlugin({ 
            filename: '[name].css', 
            allChunks: true}) 
    ] 
};