Webpack

\"\"

  1. Устанавливаем Bootstrap и Jquery через Bower
    $ bower install bootstrap jquery

     

  2. Устанавливаем необходимые плагины через npm
    $ npm install webpack css-loader style-loader file-loader url-loader --save-dev

     

  3. Создаем webpack.config.js и app.js:
    /*---- webpack.config.js ----*/
    
    var webpack = require(\'webpack\'),
        //путь к js файлам, у вас может быть другой
        path_src = \'src/js\',
        ExtractTextPlugin = require(\"extract-text-webpack-plugin\");
    
    module.exports = {
        entry: path_src + \'/app.js\',
        devtool: \'#source-map\',
        resolve: {
            modulesDirectories: [
                \".\"
            ],
            alias: {
                //ссылка на jquery lib
                jquery: \"bower_components/jquery/dist/jquery.js\"
            }
        },
        output: {
            //папка куда он все выплюнет, находится в корне проекта
            path: \'dist\',
            filename: \'bundle.js\'
        },
        module: { 
            loaders: [
                {
                    test: /\\.css$/,
                    loader: ExtractTextPlugin.extract(\"style-loader\", \"css-loader\")
                },
                { 
                    test: /\\.png$/, 
                    loader: \"url-loader?limit=100000\" 
                },
                { 
                    test: /\\.jpg$/, 
                    loader: \"file-loader\" 
                },
                {
                    test: /\\.(woff|woff2)(\\?v=\\d+\\.\\d+\\.\\d+)?$/, 
                    loader: \'url?limit=10000&mimetype=application/font-woff\'
                },
                {
                    test: /\\.ttf(\\?v=\\d+\\.\\d+\\.\\d+)?$/, 
                    loader: \'url?limit=10000&mimetype=application/octet-stream\'
                },
                {
                    test: /\\.eot(\\?v=\\d+\\.\\d+\\.\\d+)?$/, 
                    loader: \'file\'
                },
                {
                    test: /\\.svg(\\?v=\\d+\\.\\d+\\.\\d+)?$/, 
                    loader: \'url?limit=10000&mimetype=image/svg+xml\'
                },
    
                //webpack автоматически устранит зависимость bootstrap.js от jquery
                {
                    test: /bower_components\\/dist\\/bootstrap\\/js\\//,
                    loader: \'imports?jQuery=jquery\'
                },
            ]
        },
        plugins: [
            //чтобы в любом месте сразу писать через $
            new webpack.ProvidePlugin({
                $: \"jquery\",
                jQuery: \"jquery\"
            }),
            new ExtractTextPlugin(\'bundle.css\') 
        ]
    };
    
    
    /*---- app.js ----*/
    
    //подключаем bootstrap.css
    require(\'bower_components/bootstrap/dist/css/bootstrap.css\');
    
    //подключаем bootstrap.js
    require(\'bower_components/bootstrap/dist/js/bootstrap.js\');
    
    //подключаем файл стилей
    require(\'src/css/_main.scss\');
    
    

     

  4. Запускаем команду \”webpack\”
  5. Подключаем получившиеся bundle к странице:
    <!DOCTYPE html>
    <html xmlns=\"http://www.w3.org/1999/xhtml\">
    <head>
        <title></title>
        <meta charset=\"utf-8\">
        <link href=\"dist/bundle.css\" rel=\"stylesheet\" />
    </head>
    <body>
        <script src=\"dist/bundle.js\"></script>
    </body>
    </html>
    
  6. Проверяем и радуемся что все работает.

 

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *