Make Webpack 2.2.1 Output Single JS File

Question

I have a very simple project I'm using to test out webpack. When running against my code, I get 2 output files, 0.bundle.js and bundle.js.

How do I prevent this and get webpack to only output a single js file?

Folder Structure

>- dist
>- node_modules
v- src
    v- libs
        BlackTriangle.js
    app.js
    index.html
    main.js
package.json
webpack.config.js

webpack.config.js

var path = require("path"),
    webpack = require("webpack");

module.exports = {
    entry: "./src/main.js",
    devtool: "source-map",
    resolve: {
        extensions: [ ".js", ],
        modules: [ "node_modules", ],
        alias: {
            "BlackTriangle" : "./libs/BlackTriangle",
        },
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "main.js",
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader",
                options: {
                    presets: ["es2015"],
                },
            },
        ],
    },
};

index.html

<!DOCTYPE html>
<html>
    <head>
        <base href="/">
        <meta charset="utf-8">
        <title>Webpack Black Triangle</title>
        <link rel="stylesheet" type="text/css" href="main.css">
        <script type="text/javascript" data-main="main" src="node_modules/requirejs/require.js"></script>
    </head>
    <body>
        <div id="triangle" class="BlackTriangle">
            <div class="BlackTriangle-inner"></div>
        </div>
    </body>
</html>

main.js

//  Configure requirejs to work with external libraries
require.config({
    //
    baseUrl: "",
    paths: {
        "BlackTriangle" : "libs/BlackTriangle",
    },
});


(function() {
    "use strict";

    //  Call the main function when the page load has completed
    if (document.readyState == "complete") {
        main();
    }
    else if (window.addEventListener) {
        window.addEventListener("load", main, false);
    } else if (window.attachEvent) {
        window.attachEvent("onload", main);
    }
    else
    {
        var oldOnload = window.onload;
        window.onload = function() {
            oldOnload();
            main();
        };
    }

    function main() {
        require([ './app' ], function(app) {
            app.init();
        });
    }
})();

app.js

define((require) => {
    'use strict';

    return {
        init: () => {
            const BlackTriangle = require("BlackTriangle");

            const triangle = new BlackTriangle('#triangle');

            window.setInterval(
                () => {
                    triangle.rotate(1);
                    triangle.render();
                },
                20
            );
        },
    };
});

BlackTriangle.js

define((require) => {
    const blackTriangle = function(selector) {
        this.angle = 0;
        this.innerEl = document.querySelector(selector).querySelector('.BlackTriangle-inner');
    };

    blackTriangle.prototype.rotate = function(amount) {
        this.angle = (this.angle + amount) % 360;
    };

    blackTriangle.prototype.render = function() {
        this.innerEl.style.transform = `rotate(${this.angle}deg)`;
    };

    return blackTriangle;
});

There is no need for adding snippets for files that are not supposed to work together, especially with webpack that cannot run in the browser — Adam Wolski, Feb 01 '17 at 22:53
Have you cleaned the dist folder and run again the build? Does it still produce 2 files? — Adam Wolski, Feb 01 '17 at 22:58
Creating two output files should [not even be possible](http://stackoverflow.com/questions/35903246/how-to-create-multiple-output-paths-in-webpack-config). — ssc-hrep3, Feb 01 '17 at 22:59
@AdamWolski Snippets were the easiest way. The code sample insert kept screwing with the formatting. (figured it out) I have cleaned the dist folder. The 0.bundle.js contains the contents of BlackTriangle.js and app.js while bundle.js only contains the webpack loader code and my main.js code. — Jeff Tillwick, Feb 01 '17 at 23:00
@ssc-hrep3 That post is specific about multiple output paths, not files (chunks). Webpack is outputting 2 different files (chunks) from the single entry point. — Jeff Tillwick, Feb 01 '17 at 23:07
This is happening to me as well, the bad thing is that the first bundle references the second bundle in some wonky manner such that it's rooted. If I add a relative public path in my output config, then webpack incorrectly references the first bundle. Anyone else running into this? Seems like different behavior than webpack 1, like your main and webpack loading code goes into one bundle and all its imports then go into second bundle. — GetFuzzy, Feb 02 '17 at 21:57

score 3 · Answer 1 · answered Feb 02 '17 at 10:59

3

You can force webpack to create only one chunk by using LimitChunkCountPlugin plugin:

plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1, // disable creating additional chunks
    })
],

answered Feb 02 '17 at 10:59

Everettss

15,475
9
72
98

I tried this, for whatever reason it seems to kill the HtmlWebpackPlugin, and my html template no longer gets processed. – GetFuzzy Feb 02 '17 at 21:59
I fixed my issue. https://github.com/webpack/webpack/issues/1389 Turned out to be AMD loading issue. Switching my main module to define seemed to fix things. – GetFuzzy Feb 02 '17 at 22:11

score 0 · Answer 2 · answered Jul 02 '18 at 16:04

0

Using define instead of require fix the problem on my project (thanks @GetFuzzy)

Before:

require(["jquery"], function($) {
  ...
});

After:

define(["jquery"], function($) {
  ...
});

answered Jul 02 '18 at 16:04

Remy Mellet

1,675
20
23

Make Webpack 2.2.1 Output Single JS File

2 Answers2