Webpack 2: How do I generate a bundle.js from Bootstrap premade template?

Question

I want to generate a bundle.js from this pre-esxisting bootstrap template (it uses less) https://github.com/BlackrockDigital/startbootstrap-sb-admin-2

I tried to generate it but I failed since the styles are never generated and the bundle.js is empty as you can see in the "dist" folder(This was expected since the index.js which is the entry point is empty as well. https://github.com/juanlet/webpack . What should I do in order for webpack2 to include all the js,css and less files that came with the template and put it in a bundle.js?. Should I include every file on the index.js entry file?. I'm running out of ideas. Any article, documentation or instruction will be very welcomed. Thank you very much.

Answer 1

If you want to build this out with webpack, your first step is actually using whatever your entry point is to import or require other libs/files.

So, for example, if your entry point in your wepback.config.js is

entry: {
   bundle: './src/js/api/index.js',
   vendor: VENDOR_LIBS
},

Then that file needs to contain imports that you wish to include in that file. And then those files include other files and so on, until you have all your files bundled up through the root of your tree (index). In a very simple way, this is what webapack does: it imports/requires your files, bundles them, and loads them depending on your configuration.

In order to load/compile your LESS, you will either have to include it as an import in your JS files, or you could also use extract-text-webpack-plugin to generate a separate CSS bundle.

This is the best overview I can give to this question since I don't know the exact way your want to take your code and bundle it. Feel free to ask questions if you have them, and I will edit my answer to try and help answer them.

EDIT: This is an example of an older config I have extracting SASS into it's own file. It's using v1, but it more or less works the same for webpack 2. I just don't have an example with me right now: (Here is the documentation for using extract in v2. A little different, but not too much).

module.exports = {
    devtool: 'eval',

    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        'babel-polyfill',
        './app/index',
    ],

    resolve: {
        extensions: ['', '.js']
    },

    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/public/'
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin('public/app.css'),
        new DashboardPlugin(dashboard.setData)
    ],

    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['react-hot', 'babel'],
            include: path.join(__dirname, '..', 'app')
        },

        // JSON
        {
            test: /\.json$/,
            loaders: ['json-loader']
        },

        // Img
        {
            test  : /\.(png|jpg|svg|eot|ttf|woff|raw)$/,
            loader: 'url-loader?limit=4096'
        },

        // Sass
        {
            test: /\.scss$/,
            loaders: [ 'style', 'css?sourceMap', 'postcss', 'sass?sourceMap' ]
        }]
    },

    postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
}

MAJOR EDIT:

An example repo exists here: https://github.com/thesublimeobject/webpack2example

Running webpack will bundle up your files, imported from an index.js file I created. This bundles all the external libraries which I installed via npm and removed them from the index.html file. I did not test any of the code that was generated since that's way beyond an answer to this question. Your LESS will also be bundled into the dist folder as a separate file you will need to provide a link to in the HTML (that's one thing I forgot to do is add links to the /dist, but I'm sure you can do that.