4

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

4
  • 1
    Are you sure that main.js exists? That exact code works without issues for me. Commented Aug 9, 2016 at 13:31
  • Hey @robertklep thanks for your answer. Yes I'm sure it exist. It;s in same foder as index.js which i call ( upnito.sk/0/8s92fx26y6khngumhe7drdth3yt9997q.PNG ), I'm not using node.js which may be the reason Commented Aug 9, 2016 at 13:35
  • 1
    Yeah, I only tested with Node. Instead of './main.js', try __dirname + '/main.js'. Commented Aug 9, 2016 at 13:39
  • Lol i can't belieave it, this fixed my issue. Please make it as answer to let me mark it :) Commented Aug 9, 2016 at 13:44

2 Answers 2

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)

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks @robertklep :)
1

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]

1 Comment

Hey @Sebastian Sebald, thank you for your hint. I thump it up. Just few sec before i noticed answer of robertklep which make my code works once again.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.