Webpack emits bundle

Question

I'm trying to create a html5 game here, and thought I could add webpack to the mix - but I'm having some problems.

When I run it by using npm start everything is OK. Its not really OK, it states right there that the bundle is emitted :-/. Here the dump:

pixijs@1.0.0 start C:\Users\foo\Desktop\pixijs
> webpack-dev-server --mode development

i ?wds?: Project is running at http://localhost:8080/
i ?wds?: webpack output is served from /
i ?wdm?: Hash: e4ec780bdd5d19347454
Version: webpack 4.29.6
Time: 1417ms
Built at: 2019-03-08 11:09:37
       Asset     Size  Chunks             Chunk Names
foobundle.js  350 KiB    main  [emitted]  main
Entrypoint main = foobundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/game.ts 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/events/events.js] 13.3 KiB {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 8.1 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./src/game.ts] 276 bytes {main} [built]
[./src/scenes/GameScene.ts] 169 bytes {main} [built]
[./src/scenes/MainMenuScene.ts] 189 bytes {main} [built]
    + 13 hidden modules
i ?wdm?: Compiled successfully.

At the start I named the bundle for foobundle.js, adding the typescript files game, GameScene and MainMenuScene.

My webpack.config.js should be pretty strait forward:

const path = require('path');

module.exports = {
    entry: './src/game.ts',

    output: {
        path: path.join(__dirname, './dist'),
        filename: 'foobundle.js',
    },

    module: {
        rules: [
            {
                loader: 'ts-loader',
                test: /\.tsx?$/,
                exclude: /node_modules/,
            },
        ]
    },

    resolve: {
        extensions: [".tsx", ".ts", ".js", ".json"]
    },
};

So as I understand it should load typescript with the entrypoint of game.ts, should put a foobundle.js in dist folder in the project folder.

If anything it should "bundle" up game.ts right? But the bundle is not created at all.

I run it by running npm start that runs package.json. In scripts it starts webpack-dev-server --mode development

Answer 1

webpack-dev-server doesn't emit any files, if you want to get bundle files you should use webpack instead.

e.g.

package.json

"build": "webpack --mode development"