How to configure and run webpack from .js file instead of webpack.config

Question

i am creating dynamicly generated webpack module base on user input.

Standard static way where you specifi folder or files in config and run webpack on it with babel-loader works correctly.

var path = require('path');

var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');

var dir_js = path.resolve(__dirname, 'js');
var dir_html = path.resolve(__dirname, 'html');
var dir_build = path.resolve(__dirname, 'build');

module.exports = {
    entry: path.resolve(dir_js, 'main.js'),
    output: {
        path: dir_build,
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: dir_build,
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: dir_js,
            }
        ]
    },
    plugins: [
        // Simply copies the files over
        new CopyWebpackPlugin([
            { from: dir_html } // to: output.path
        ]),
        // Avoid publishing files when compilation fails
        new webpack.NoErrorsPlugin()
    ],
    stats: {
        // Nice colored output
        colors: true
    },
    // Create Sourcemaps for the bundle
    devtool: 'source-map',
};

However if I want to make module dynamicly i cant use static config file. So i google a bit how could I directly call webpack from JS file with some specific configuration. I found THIS

Where there is option to call:

var webpack = require("webpack");    
// returns a Compiler instance
webpack({
    // configuration
}, function(err, stats) {
    // ...
});

So i create something really simple index.js:

var webpack = require('webpack');
webpack({
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    }
}, function(err, stats) {
    // console.log(stats);
    console.log(err);
});

Unfortunately nothing happend when i call this file via node index.js, even console.log(err) output is null From this point i didnt find anything else usefull.

So i hope if here is anyone who have experience with that and can advise me what I'm doing wrong. Or alternativly give me advise whats the other way how to create it

Answer 1

Usually, it's best to use full paths in your webpack configuration, even if the configuration is dynamic:

entry: path.resolve(__dirname, 'main.js');

(and similarly for output.filename)

Answer 2

Check if you entry file exists, if so your code should work.

I recommend adding console.log(stats.toString());. This way you'll get some additional helpful output. Even if there wasn't an error.

I removed the main.js and got the following output from stats:

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./main.js in <some dir>

If it exists, something like that should appear in your terminal:

$ node index.js
Hash: 042eac64f1d594f97cd4
Version: webpack 1.13.1
Time: 38ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.41 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 19 bytes [rendered]
    [0] ./main.js 19 bytes {0} [built]