Category: Без рубрики

  • 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. Проверяем и радуемся что все работает.