Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Webpack - No Output File, No Errors Reported

I am learning Webpack and going through it again and again. In the latest build, there is something very strange going on. CLI reports everything is well & the output file dress_aphrodite.js is emitted, yet its nowhere to be found in the folder.

Here are the logs: From CLI:

http://localhost:8080/webpack-dev-server/
webpack result is served from /app/
content is served from ./app
Hash: 5334867c12acfa65ba90
Version: webpack 1.12.9
Time: 1966ms
                    Asset    Size  Chunks             Chunk Names
    dress_aphrodite.js  390 kB       0  [emitted]  main
dress_aphrodite.js.map  479 kB       0  [emitted]  main
chunk    {0} dress_aphrodite.js, dress_aphrodite.js.map (main) 354 kB [rendered]
    [0] multi main 52 bytes {0} [built]
    [1] ./~/babel-polyfill/lib/index.js 209 bytes {0} [built]
    [2] ./~/core-js/shim.js 4.31 kB {0} [built]
    [3] ./~/core-js/modules/es5.js 10.2 kB {0} [built]
    ...
  [263] ./~/ansi-regex/index.js 135 bytes {0} [built]
webpack: bundle is now VALID.

So everything looks good above. Yet, there is no dress_aphrodite.js file in the main folder or ./app folder.

Here is the webpack.config.js file:

var path = require ('path');
var webpack = require ('webpack');

module.exports = {
    entry : [
        'babel-polyfill',
        './app/da',
        'webpack-dev-server/client?http://localhost:8080'
    ],
    resolve : {
        extension : ['', '.js', '.jsx', '.json']
    },
    output : {
        publicPath : '/app/',
        filename : 'dress_aphrodite.js'
    },
    debug : true,
    devtool : 'source-map',
    devServer : {
        contentBase : './app'
    },
    module: {
        loaders: [
            {
                test : /\.js$/,
                include : path.join (__dirname, 'app'),
                loader : 'babel-loader',
                query : {
                    presets : ["es2015"]
                }
            }
        ]
    }
};

And finally, incase, anyone needs the package.json file, here it is:

{
  "name": "dress_aphrodite",
  "version": "1.0.0",
  "description": "",
  "main": "dress_aphrodite.js",
  "scripts": {
    "start": "node_modules/webpack-dev-server/bin/webpack-dev-server.js"
  },
  "author": "",
  "license": "ISC"
}

Any help as to why the output file is not being emitted / rendered?

Thanks

Edit: Tried without the Output.publicPath (as suggested by YuWu), still no change. Changed it to path property & still no change as well.

Edit 2: As a test, I added the html-webpack-plugin into the webpack.config.js file to see if it would be emitted by webpack and yes, apparently that too has been emitted and yet I cannot see.

Edit 3: (Post generous conversation with YuWu) : The webpack-dev-server is running fine and displaying the window.alert in the js file along with the dynamic html file created via html-webpack-plugin. I recall installing the webpack-dev-server globally. Could that be where the html & the js emitted files are being stored? Where can i locate the global directory in Ubuntu 15.1? (It shouldn't be the case as package.json is pointing towards the local directory path in reference to the 'start' property...)

Edit 4: Here is the question I posted on webpack github issues section. My further investigation findings are also noted there in the comments. https://github.com/webpack/webpack/issues/1736

like image 275
Kayote Avatar asked Dec 09 '15 16:12

Kayote


1 Answers

It's expected that you won't see anything output to disk with this configuration.

You've defined webpack-dev-server as one of your entry points, and have started to set up the dev server via the devServer property in the project

webpack-dev-server works by running webpack, and storing the contents of the compilation in memory. This way, when you make a change to one of your files and webpack-dev-server recompiles the changes, it can do so quickly.

By storing these files in memory, we remove I/O latency allowing webpack to complete recompilations quickly and serve files to your browser quickly.

If you want files to be output onto disk, you should run webpack instead of webpack-dev-server and remove webpack-dev-server/... from the entry point in your config.

like image 187
Anuj Avatar answered Oct 19 '22 20:10

Anuj