R
R
RemakeRr2017-05-21 13:26:32
webpack
RemakeRr, 2017-05-21 13:26:32

How to correctly connect Bootstrap to Webpack 2?

I have a webpack build like this.

./
    /build
    /source
    /webpack
        bootstrap.js
        css.extract.js
        css.js
        devserver.js
        fonts.js
        images.js
        js.uglify.js
        pug.js
        sass.js
.bootstraprc
package.json
webpack.bootstrap.config.js
webpack.config.js

How to properly include Bootstrap ?
I didn’t understand where to write bootstrapEntryPoints .dev or .prod
Here is the repo: https://github.com/RemakeRr/webpack2
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const merge = require('webpack-merge');
const pug = require('./webpack/pug');
const devserver = require('./webpack/devserver');
const sass = require('./webpack/sass');
const css = require('./webpack/css');
const extractCSS = require('./webpack/css.extract');
const uglifyJS = require('./webpack/js.uglify');
const images = require('./webpack/images');
const fonts = require('./webpack/fonts');
const bootstrap = require('./webpack/bootstrap');
const bootstrapEntryPoints = require('./webpack.bootstrap.config.js');


const PATHS = {
    source: path.join(__dirname, 'source'),
    build: path.join(__dirname, 'build')
};

const common = merge([
    {
        entry: {
            'index': PATHS.source + '/pages/index/index.js',
            'blog': PATHS.source + '/pages/blog/blog.js'
        },
        output: {
            path: PATHS.build,
            filename: 'js/[name].js'
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'index.html',
                chunks: ['index', 'common'],
                template: PATHS.source + '/pages/index/index.pug'
            }),
            new HtmlWebpackPlugin({
                filename: 'blog.html',
                chunks: ['blog', 'common'],
                template: PATHS.source + '/pages/blog/blog.pug'
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'common'
            }),
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            })
        ]
    },
    pug(),
    images(),
    fonts(),
    bootstrap()
]);

module.exports = function(env) {
    if (env === 'production'){
        return merge([
            common,
            extractCSS(),
            uglifyJS()
        ]);
    }
    if (env === 'development'){
        return merge([
            common,
            devserver(),
            sass(),
            css()
        ])
    }
};

Answer the question

In order to leave comments, you need to log in

1 answer(s)
N
Nurasyl Aldan, 2018-02-07
@nurasyl

There is an example

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question